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

jQuery is not loading js file in script tag of ajax request

本文关键字：加载 文件 js 脚本 ajax 请求 jQuery      更新时间：2023-09-26

我有一个 ajax POST 请求，这个请求带有引用外部 js 文件的 html <script src="">标签，当我在 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没有加载文件，我还检查了网络选项卡。

这是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的答案）

最简单的方法是删除 

<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 可以转换 从它在内容类型标头中接收的内容到什么的数据类型 你需要。例如，如果您希望将文本响应视为 XML，使用"text xml"作为数据类型。你也可以做一个JSONP 请求，将其作为文本接收，并由jQuery解释为XML： "jsonp text xml"。类似地，速记字符串，如"jsonp xml" 将首先尝试从 JSON 转换为 XML，如果失败， 从 JSON 转换为文本，然后从文本转换为 XML。

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

相关文章：