使用 jQuery 加载脚本答案

【问题标题】：Loading scripts using jQuery使用 jQuery 加载脚本
【发布时间】：2010-05-21 04:18:43
【问题描述】：

$.ajax({ url: "plugin.js", dataType: 'script', cache: true, success: function() {
    alert('loaded');
}});

1) 我无法加载脚本，可能是由于路径不正确，但如何确定正确的路径？以上代码在init.js，plugin.js也在同一个文件夹中。

2) 我可以用同一个请求一次加载多个插件吗？例如。 plugin.js，另一个plugin.js？

root
|
|_ html > page.html
|
|_ static > js > init.js, plugin.js

感谢您的帮助

【问题讨论】：

标签： javascript jquery ajax load external

【解决方案1】：

您需要使用 getScript，而不是 ajax。 Ajax 是用来加载数据的，不是用来执行代码的。

如果您需要加载多个文件，请尝试以下操作：

var scripts = ['plugin.js', 'test.js'];
for(var i = 0; i < scripts.length; i++) {
  $.getScript(scripts[i], function() {
    alert('script loaded');
  });
}

【讨论】：

来自文档：getScript 是$.ajax({ url: url, dataType: 'script', success: success }); 的简写，所以使用.ajax 没有任何问题，只是有点冗长。
我正在使用 .ajax 专门用于异步缓存（缓存：true）。

【解决方案2】：

1) 路径将相对于它所加载的页面（不是您的 init 脚本的路径），因为这是浏览器在执行 ajax 请求时所在的 url。 p>

编辑：根据您的编辑，加载脚本的路径是 /static/js/plugin.js（如果它将部署在您的域的根目录），或者是 ../static/js/plugin.js安全（假设将加载它的所有页面都在/html）。

2) 不。如果它们位于不同的文件中，则它们需要是不同的请求。不过，您可以将它们合并到服务器端的一个文件中...

【讨论】：

谢谢，我已经编辑了描述以显示结构，你能帮忙找到路径吗？谢谢！
尝试了 /static/js/plugin.js 和 /static/js/plugin.js 但仍然无法加载。还有其他交叉检查方式吗？
首先尝试直接在浏览器中加载文件，它应该可以在http://<domain>/static/js/plugin.js 工作。假设该文件在您期望的位置并且有效，请尝试安装 firebug 并在触发 ajax 请求时查看 Net 面板以查看请求的实际 URL 并查看响应是什么...
谢谢！我没有路径是相对于 page，我是 jQuery 的新手，这会消耗很多时间

【解决方案3】：

作为更新，使用 jQuery 1.9.x 执行此操作的更好方法是使用 Deferreds-methods（即 $.when），如下所示：

$.when(
  $.getScript('url/lib.js'),
  $.getScript('url/lib2.js')
).done(function() {
  console.log('done');
})

.done() 回调函数有许多有用的参数。

阅读文档：http://api.jquery.com/jQuery.when/

【讨论】：

【解决方案4】：

查看 jQuery .getScript 函数，该函数将加载脚本并将其包含在当前文档中。

1) 路径应该是/static/js/plugin.js，相对于您的文档。

2) 否。每个文件都由单个 HTTP 请求加载。

【讨论】：

尝试了 /static/js/plugin.js 和 /static/js/plugin.js 但仍然无法加载。还有其他交叉检查路径的方法吗？
开发时使用Firefox。安装免费的 Firebug（插件）。在其中，激活所有“调试面板”并在需要停止 javascript 的地方放置一个“断点”。然后您可以将鼠标悬停在活动变量上并读取它们的当前值。相当不错！

【解决方案5】：

我会检查 Firebug 的 net 选项卡，看看它是否正确加载，以及它尝试加载的路径。

路径将来自包含 JavaScript 的文档。

我还保留了一个这样的配置对象（本例中为 PHP）

var config = { basePath: '<?php echo BASE_PATH; ?>' };

那你就可以了

var request = config.basePath + 'path/to/whatever.js';

【讨论】：

【解决方案6】：

您可以使用'../' 将脚本路径设置为基本路径。然后为

添加相对路径

    $.getScript("../plugin.js").done(function(script, textStatus ) {
    alert("loaded:" + textStatus);
}).fail(function(script, textStatus ) {
    alert("failed: " + textStatus);
});

【讨论】：