Ajax 调用加载的 Javascript 不执行？

Posted 2023-03-07

【中文标题】Ajax 调用加载的 Javascript 不执行？

【英文标题】：Javascript loaded by an Ajax call doesn't execute?

【发布时间】：2019-03-12 08:27:47

【问题描述】：

我正在尝试使用 Ajax 实现 html 代码进入我的临时页面。

这可以正常工作，只有 javascript 没有按我的预期执行。如果我在浏览器中独立加载代码，则 javascript 会按预期执行。如果它在我的临时页面中使用 Ajax 实现，则不会。为什么？

这是我正在加载的 html 和 javascript 代码：

<link rel="stylesheet" type="text/css" href="/x/x/x/x/stylesheet.css">
<div id='content_Box'></div>
<script type="text/javascript" src="/x/x/x/x/javascript.js" charset="utf-8"></script>

这里是加载它的 ajax 代码：

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    if (this.readyState == 4 && this.status == 200) 

    content_Box.innerHTML = "";

    content_Box.innerHTML = this.responseText;

    
    ;

    xhttp.open("GET", Pfad, true);
    xhttp.send();

感谢您的宝贵时间！

【问题讨论】：

content_Box 属于外部文件。因此，在将外部文件添加到当前文档之前，您不能添加它......

它是通过 var content_Box = document.getElementById("content_Box ");

添加的

如何定义content_Box？什么是响应 Ajax 请求？

嗨 Evgeniy，你定义的和响应是什么意思？

它在索引文件中定义，响应是我从 ajax 调用中得到的？

【参考方案1】：

您的问题不在于 ajax 调用。

问题是

content_Box.innerHTML = this.responseText;

不会导致任何脚本执行。

查看Executing <script> elements inserted with .innerHTML 了解查看文本、查找脚本并执行它们的代码。

【讨论】：

这听起来像是解决方案。现在我必须先阅读它。但是，如果我有一个导航栏并想在页面之间切换，这种通过 ajax 加载外部页面并使用它们的实现不是可行的方法吗？

正确。主要的 JS 框架——Angular、React、Vue——​​不加载 javascript 来执行它，它们加载 html。您永远不需要加载 javascript - 您可以随时将其放在执行加载的原始页面中。

【参考方案2】：

这可能取决于你的 js 实际做了什么。 无论如何，一旦加载了 ajax 响应（在 xhttp.onreadystatechange 中），您就可以调用这些函数，以确保在从响应中获得的部分也至少运行一次。

【讨论】：

感谢您的回答。它通过 ajax 从数据库加载一些数据并从中创建 div 对象。在我通过 html 包含代码之后，我理解整个事情的问题是。如何访问包含文件的功能，这些文件位于 javascript 文件中，并且与包含的代码位于同一文件夹中。听起来我可以在上面提到的 ajax 调用之后引用它们，但这并没有做任何事情。我以为我只是包含代码并使用它，因为我已经在包含的索引中引用了 javascript 文件。

所以您想在收到第一部分后使用您在 index.html 文件中编写的函数从 ajax 加载更多数据，对吧？

我想通过 ajax 将一个外部页面加载到我的主网站中，并像在浏览器中打开它一样访问该外部页面的功能。如果我使用带有标题和导航的模板网站，我认为这个过程将是默认的方式，在 katgeories 之间切换。