在主页中运行用 AJAX 的调用/响应数据编写的 JavaScript 函数

Posted 2023-03-05

【中文标题】在主页中运行用 AJAX 的调用/响应数据编写的 JavaScript 函数

【英文标题】：Run A JavaScript Function Written In Called/Responce Data Of AJAX In Main Page

【发布时间】：2020-10-03 16:32:38

【问题描述】：

我的问题是我有一个用 php 文件编写的 javascript 函数，当我从 AJAX 请求调用它时，我想在成功的 AJAX 请求后在主页上运行该 JavaScript 函数。例如，我有一个 main.html 文件，我在其中编写了一个 AJAXX 函数，如下所示。

ma​​in.html

<script type="text/javascript">
/* AJAX Function
----------------------------------------------- */
function ajaxFunction() 
    var FD = new FormData();
    var ajx = new XMLHttpRequest();
    ajx.onreadystatechange = function () 
        if (ajx.readyState == 4 && ajx.status == 200) 
            document.getElementById("mainContent").innerHTML = ajx.responseText;
            hello();  //Uncaught ReferenceError: hello is not defined
        
    ;
    ajx.open("POST", "/example.php", true);
    ajx.send(FD);
    document.getElementById("mainContent").innerHTML = 'Loading...';
    return false;

</script>

我的 example.php 文件包含一个 JavaScript 函数

example.php

<?php
echo 'Some contents and functions';
echo '<script type="text/javascript">
   function hello() 
       alert("Hello");
    
   </script>';
echo 'Some contents and functions';
?>

现在，当我运行 index.html 文件时，我在控制台休息时收到 Uncaught ReferenceError: hello is not defined 错误我看到函数体是在 HTML 页面上编写的，同时检查页面上的元素。

据我所知innerHTML does not run scripts. 那么解决这个问题的方法是什么。您还可以查看以下链接的答案，我认为该答案与我的问题有关，但尝试过但无法解决我的问题。

研究问题/答案：

https://***.com/a/3250386/3170029 https://***.com/a/47614491/3170029

【问题讨论】：

脚本标签仅在页面加载时运行。看看这个***.com/a/22622014/7645069

感谢您的确认。我也知道，但我想知道一种解决方法，正如我在上面提到的答案中看到的那样。

知道了。您可能需要更新您的问题以使其更清晰

【参考方案1】：

正如我分享的那样，你知道 innerHTML does not run scripts. 所以我们必须环顾四周，然后我在 *** 上找到了一个解决方案，我在这里分享这个问题的答案。

ma​​in.html

<script type="text/javascript">
/* AJAX Function
----------------------------------------------- */
function ajaxFunction() 
    var FD = new FormData();
    var ajx = new XMLHttpRequest();
    ajx.onreadystatechange = function () 
        if (ajx.readyState == 4 && ajx.status == 200) 
            setInnerHTML(document.getElementById("mainContent"), ajx.responseText); // does run <script> tags in HTML
            hello();
        
    ;
    ajx.open("POST", "/example.php", true);
    ajx.send(FD);
    document.getElementById("mainContent").innerHTML = 'Loading...';
    return false;


//https://***.com/a/47614491/3170029
var setInnerHTML = function(elm, html) 
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach(oldScript => 
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach(attr => newScript.setAttribute(attr.name, attr.value));
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  );

</script>

它的概念很清楚。当您从 PHP 文件中获取响应数据时，首先从中提取 <script ..... </script> 标签并使用createElement('script') 将它们添加到 index.html 文件中，然后将所有脚本复制到此，然后您可以在任何地方轻松调用响应数据后的函数.

换句话说，您可以使用调用 createElement('script') 的 DOM 方法在初始解析之外创建执行脚本元素，设置其 src/content，并将其添加到文档中。另一种方法是 jQuery 的 getScript90 所做的。