加载页面后如何获取 JavaScript 文件？

Question

我想将 AJAX 表单加载到我的页面中，并附上它自己的 validation.js。我该怎么做？

我尝试用自己的$.ajax请求加载每一个，然后在页面上成功输出HTML，但是validation.js在表单上不起作用。

我可以在现有页面中加载一个 JavaScript 文件，然后是一个 HTML 文件（带有ajax），然后获取页面上的 HTML 输出以响应这个 JavaScript 函数吗？

Answer 1

在页面加载后，使用以下 javascript 在异步模式下添加 javascript 文件。

(function() {
  var d=document,
  h=d.getElementsByTagName('head')[0],
  s=d.createElement('script');
  s.type='text/javascript';
  s.async=true;
  s.src='/js/myfile.js';
  h.appendChild(s);
}()); 

如果您有许多文件要以这种方式加载，您可以将其转换为函数调用。

function asyncLoader(scriptName)
{
  var d=document,
  h=d.getElementsByTagName('head')[0],
  s=d.createElement('script');
  s.type='text/javascript';
  s.async=true;
  s.src = scriptName;
  h.appendChild(s);
}

此方法不保证/通知何时加载 js 文件。为此，您可以在正在加载的文件中放置一些事件调用。

如果您从 ajax 加载一些 html 并将其添加到您当前的 html（如 innerHtml）中，您可以将 <script> 标记放在该 html 中，它的行为与上述代码相同。

请参阅此question 及其答案了解更多详情。

编辑：

以下是使用$.getScript的JQuery方式

$.getScript("path/my_script.js", function(){
  console.log( "Load was performed." );
});  //JQuery can also be used instead of $

使用$.ajax做同样的事情

$.ajax({
  url: "path/my_script.js",
  dataType: "script",
  success: function(){
    console.log( "Load was performed." );
  }
});