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

Posted 2023-05-08

【中文标题】jQuery 没有在 ajax 请求的脚本标签中加载 js 文件

【英文标题】：jQuery is not loading js file in script tag of ajax request

【发布时间】：2016-08-20 10:42:19

【问题描述】：

我有一个 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 没有加载文件，我也检查了网络选项卡..

【问题讨论】：

这是我的猜测，但也许 dataType 应该是“脚本”。此外，如果我正确理解问题，这个 jQuery 方法会很有帮助 - api.jquery.com/jquery.getscript。另外，看看类似的问题***.com/questions/950087/…。

不，这是正常行为

@Korgrue 没有。 OP 正在尝试加载 HTML 的 single 块。获取内容是异步的无关紧要，因为失败发生在 ajax 调用完成之后。

只是想知道：您如何验证外部 script.js 是否未加载？...您是否尝试在某些测试页面中加载？

“我还检查了网络选项卡” 是否请求 script.js、script2.js？

【参考方案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 的回答启发）

【讨论】：

请注意，OP 说 jquery is 正在运行内联脚本内容。

我亲身经历过

我认为你可能是对的；我知道 jQuery 必须明确安排运行内联脚本。与此相关的代码（在 jQuery 中）非常复杂。

是的，我认为该库在构建文档片段之前会去除 <script> 标记。

【参考方案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，使用“文本 xml”作为数据类型。您还可以制作 JSONP 请求，将其作为文本接收，并由 jQuery 解释为 XML： “jsonp 文本 xml”。类似地，诸如“jsonp xml”之类的速记字符串 将首先尝试从 jsonp 转换为 xml，如果失败了， 从 jsonp 转换为 text，然后从 text 转换为 xml。

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