jQuery 未在 ajax 请求的脚本标签中加载 js 文件

Question

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

要求：

$.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 的回答）

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() at dataType

多个空格分隔的值：从 jQuery 1.5 开始，jQuery 可以将 dataType 从它在 Content-Type 标头中收到的内容转换为您需要的内容。 例如，如果您希望将文本响应视为 XML，请对 dataType 使用“text xml”。 您还可以发出 JSONP 请求，将其作为文本接收，并由 jQuery 解释为 XML：“jsonp text xml”。 类似地，诸如“jsonp xml”之类的速记字符串将首先尝试从 jsonp 转换为 xml，如果失败，则从 jsonp 转换为文本，然后从文本转换为 xml。

"xml/html"不是有效的 MIME 类型或dataType预期参数