Question

我有一个ajax POST请求，这个请求附带带有<script src="">标签的html引用外部js文件，当我在DOM中插入这个html时JS没有加载，我做错了什么？我记得看到这个工作加载外部脚本1和脚本2没有问题。

请求：

$.ajax({
    type: 'POST',
    dataType: 'xml/html',
    cache: false,
    url: "/html/with/scripttags",
    data: {somedata:'value'},
    success: function(data) {
      $('body').append(data)
    }
  });

加载内容：

<link rel="stylesheet" media="all" href="http://domain.com/application.css" />
<script src='http://domain.com/script.js' type='text/javascript'></script>
<script src='http://domain.com/script2.js' type='text/javascript'></script>
<script type='text/javascript'>alert('executed')</script>
<div>BLAALBLABLAB</div>

然而，脚本标记中的警报执行没有问题，application.css外部文件加载没有问题。看起来jQuery没有加载文件，我也检查了网络选项卡..

Answer 1

这是jQuery的正常行为，如果你想要包含你的脚本，你需要解析html并手动添加它们。

坏消息：您甚至无法在script的字符串中选择$()个标签...

我没有测试过，但是这个快速而肮脏的例子应该有效：

function createGetScriptCallback(url) {
  return function () {
    return $.getScript(url);
  }
}
$.ajax({
  type: 'POST',
  dataType: 'xml/html',
  cache: false,
  url: "/html/with/scripttags",
  data: {
    somedata: 'value'
  },
  success: function (data) {
    var parser, doc, scriptsEl, callbacks;
    parser = new DomParser();
    doc = parser.parseFromString(data, "text/html")
    scriptsEl = doc.querySelectorAll("script[src]");
    callbacks = []
    for (var i = 0; i < scriptsEl.length; i++) {
      callbacks.push(createGetScriptCallback(scriptsEl[i].getAttribute("src")));
    }
    $.when.apply($, callbacks)
      .fail(function (xhr, status, err) {
        console.error(status, err);
      });
    $('body').append(data);
  }
});

但是你不应该依赖html来加载脚本。

修改：更少脏代码（受@ guest271314＆＃39;答案启发）

Answer 2

最简单的方法是删除

<script src='http://domain.com/script.js' type='text/javascript'></script>
<script src='http://domain.com/script2.js' type='text/javascript'></script>

来自"/html/with/scripttags"，然后致电

$.when($.getScript('http://domain.com/script.js')
      , $.getScript('http://domain.com/script2.js'))
.fail(function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
})

$.ajax() success。

另请参阅$.ajax()

上的dataType

多个空格分隔的值：从jQuery 1.5开始，jQuery可以转换从Content-Type标头中收到的数据类型到什么你需要。例如，如果您希望将文本响应视为 XML，使用“text xml”作为dataType。你也可以制作一个JSONP 请求，将其作为文本接收，并由jQuery解释为XML： “jsonp text xml”。同样，一个简写字符串，如“jsonp xml” 将首先尝试从jsonp转换为xml，如果失败，从jsonp转换为文本，然后从text转换为xml。

"xml/html"不是dataType

的有效MIME类型或预期参数

jQuery没有在ajax请求的脚本标记中加载js文件

2 个答案: