jQuery：用户点击时随机报价脚本更新？ document.write 问题

Posted 2023-02-24

【中文标题】jQuery：用户点击时随机报价脚本更新？ document.write 问题

【英文标题】：jQuery: Random Quotation Script Updating on User Click? document.write Troubles

【发布时间】：2012-02-27 10:59:02

【问题描述】：

我正在尝试制作一个小的动态引用旋转器，它可以覆盖图像上的文本。 JS 和 jQuery 都可以正常工作。问题是我希望每次单击按钮时都会更新它，这样用户就不必刷新页面即可查看新报价。

是否可以在使用 jQuery.text()、.html() 或 .append() 为 DIV 提供代码之后执行 document.write？它可以很好地逐字打印实际文本，但它不会执行

如果有人有经验或替代建议，不涉及使用 php/mysql 将其变成一个大型 AJAX 事物，我会全力以赴。我不是在寻找任何人来编写我的代码；只是指出我正确的方向。我有一种压倒性的感觉，这真的比我想象的要容易得多，而且我知道我缺少一些基本而简单的东西。

感谢您的阅读，我欢迎任何人提供任何建议。

编辑/更新：我在下面提供了一些基本代码，让您更好地理解我的意思。

<div id="text"></div>

<script src="quotes.js"></script>
$("#text").text('
  <script type="text/javascript">document.write(quote[Math.floor(Math.random()*5)]);&lt;/script&gt;
');

我只是想用从quotes.js 中提取的随机引用来更新#text。如果我可以让它发挥作用，我可以自己弄清楚如何使用 jQuery.click() 更新它。

【问题讨论】：

我刚刚看到您更新的问题。在这种情况下很简单：$('#text').html(quote[Math.floor(Math.random()*5)]);

如果我猜对了，quotes.js 只会返回一个数组quote。每次点击都没有连接到服务器，所以根本没有AJAX。

天哪，我真是个智障。为什么我要尝试在其中编写脚本？我的天啊。谢谢你指出我的白痴。

【参考方案1】：

document.write() 仅适用于打开的文档，因此您不应在 AJAX 中使用它。

如果你想执行 JavaScript，只需使用eval() 或简单的$.getScript()。这意味着 AJAX 响应应该是一个数组 (JSON)，然后每个元素可以是一个脚本、一个 html……然后您将它们发送到相应的函数。

您将“呈现”的 JSON 响应示例：

[
  0: type: 'replace', target: 'div#replaceme', value: '<p>Hello!</p>',
  1: type: 'script', target: NULL, value: 'http://example.com/test.js',
  2: type: 'append', target: '#result', value: '<p>Item 11</p><p>Item 12</p>'
]

【讨论】：

有趣...我要试试这个，我会让你知道它是怎么回事。谢谢你的帖子。我曾希望避免整个 JSON/AJAX 的事情（尽管从技术上讲，我猜这都是 AJAX），但我会试试你的方法。

'JSON.parse()'` 比 eval() 更推荐。

@jfriend00 我的意思是使用 eval 来执行“多部分”响应的一部分。例如。 [0: ..., 1: ..., 2: type: 'eval', target: NULL, value: 'alert("Dangerous")']。但是，是的，我们应该避免评估。在这种情况下，我们可能会改为使用2: type: 'alert', value: 'Not dangerous'，以便我们可以控制调用哪个函数。

【参考方案2】：

如果您希望在单击事件之后发生 DOM 更新操作，您只需将单击处理程序附加到按钮：

$('#your_button').click(function() 
  // Action
  $('#your_element').html('<p>something</p>');
);

见： http://api.jquery.com/click/

【讨论】：

感谢您的帮助，先生。谢谢。

【参考方案3】：

您可以使用 jQuery 的 html 或 append 方法，如果 script 存在于我们传递的内容中，则执行该方法。

看看这个演示

http://jsfiddle.net/ShankarSangoli/hFgE6/1/

【讨论】：

感谢您的演示。我学到了一些关于绕过脚本的知识！

【参考方案4】：

一旦加载文档，您将无法使用document.write()。这样做会导致整个文档被清除并开始一个新文档。如果你想在已经加载的文档中添加文本，那么你可以使用适当的 jQuery 方法来修改现有元素或添加新元素。

为了帮助您获得准确的代码，我们需要查看您的 HTML 以及更完整的说明，说明您要添加的内容。

作为一些示例，可以使用.append() jquery 方法或使用.html() 方法将对象添加到元素。

【讨论】：

一些简化的代码将暂时添加到原始帖子中。感谢您的回复！