jQuery：评估 ajax 响应中的脚本

IT技术 javascript jquery xml json
2021-03-22 09:32:14

来自我的 web 应用程序的 XML 响应既有要添加到页面的 HTML，也有要运行的脚本。

我正在尝试从我的 webapp 发回 XML，例如：

<?xml version="1.0"?>
<doc>
  <html-to-insert>
    <![CDATA[<p>add me to the page</p>]]>
  </html-to-insert>
  <script>
    <![CDATA[ alert('execute me'); ]]>
  </script>
</doc>

我现在正在做的是捕捉<html-to-insert>和<script>CDATA，将 html 插入页面并 eval'ing <script>。

我正在寻求对我的方法的批评。任何人的任何建议？

5个回答

您可以使用jQuery库向后端发出 XML 请求并解析它

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "your/url/that/returns/xml",
    dataType: "xml",
    success: function (xml) {
      // xml contains the returned xml from the backend

      $("body").append($(xml).find("html-to-insert").eq(0));
      eval($(xml).find("script").text());
    }
  });
});

您可以在此处和此处找到有关 jQuery 的更多信息

我还没有测试过，但它应该可以根据这篇文章工作。

你宁愿发送 JSON，它更容易解释。例子：

// Suppose your response is a string:
// { html: "<p>add me to the page</p>, script:"alert('execute me');" }
var obj = eval( "(" + response + ")" ) ;
eval( obj.script ) ;

这是我找到的最好的答案。工作完美：

element.innerHTML = xmlhttp.responseText;
var scriptElements = element.getElementsByTagName('SCRIPT');
for (i = 0; i < scriptElements.length; i ++) {
    var scriptElement = document.createElement('SCRIPT');
    scriptElement.type = 'text/javascript';
    if (!scriptElements[i].src) {
        scriptElement.innerHTML = scriptElements[i].innerHTML;
    } else {
        scriptElement.src = scriptElements[i].src;
    }
    document.head.appendChild(scriptElement);
}

感谢梦想家约瑟夫。原始答案在这里。

编辑：

澄清：

  1. 脚本只在script标签内运行
  2. 添加文档加载后的脚本，只有添加到head标签才生效

感谢Deniz Porsuk的评论以改进答案

因为我犯了这个错误，损失了几个小时。而且我不希望其他人浪费时间。
2021-05-01 09:32:14
是的，这是正确的方式。但是，如果您在 div 中创建脚本，例如 var divElement = document.createElement('div'); 并从 scriptElement = document.createElement('SCRIPT'); 推送innerHTML; divElement.innerHTML = scriptElement; 浏览器不会执行脚本。
2021-05-05 09:32:14
你说的是哪个div？我使用脚本标签var scriptElement = document.createElement('SCRIPT');。请解释您的评论。
2021-05-06 09:32:14
如果你 appendChild 你的脚本在 div 标签内。它们不会被浏览器执行。脚本应附加“脚本”标签。
2021-05-10 09:32:14
如果答案中没有出现 div 元素，我仍然不明白为什么要提到 div 元素。
2021-05-21 09:32:14

与 XML imho 相比，JSON 更适合此目的。

如果您将 ajax 请求响应输出为$target.html(response);脚本将由浏览器评估，而您无需采取任何其他措施。

其它你可能感兴趣的问题
上一篇如何更改 angularjs $http.jsonp 的标头 下一篇如何创建多过滤功能来过滤掉多个属性？