使用 Ajax 调用 php 文件时，php 文件中的 JavaScript 不起作用 [重复]答案

【问题标题】：JavaScript in php file doesn't work when php file is called using Ajax [duplicate]使用 Ajax 调用 php 文件时，php 文件中的 JavaScript 不起作用 [重复]
【发布时间】：2014-02-18 15:21:29
【问题描述】：

使用 Ajax，我正在调用一个包含 javascript 的 php 文件，但是这样，javaScript 不起作用。

这里给出了 main.html 文件。它只是使用 Ajax 调用一个名为 test1.php 的 php 文件来更新客户端的所有页面。

 <!DOCTYPE html>
 <html>
 <body>
       <!-- run php file to fill the page -->
       <script>
             var xmlhttp = new XMLHttpRequest();

             xmlhttp.onreadystatechange=function()
             {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                    document.body.innerHTML = xmlhttp.responseText;         
                 }
             }

             xmlhttp.open("GET","test1.php",true);
             xmlhttp.send();
       </script> 
 </body>
 </html>

而test1.php文件很简单，测试如下：

 <p id="demo">Hi there</p>
 <script>
        document.write("Yes! Hi there");    
        alert('Welcome!');
 </script>

现在，只是为了检查 test1.php 是否正常，我输入了浏览器的 url 行：

localhost/test1.php

一切正常，显示 html 和 js 的文本，并出现一个带有“欢迎”字样的警告窗口！显示出来。

但是如果我调用主页

localhost/main.html

然后只显示html文本'Hi there'。 JS 被忽略。

有人知道这是为什么吗？谢谢

【问题讨论】：

它应该与附加一起工作，而不是将其提供给 innerHTML。 Append 会将其附加为 HTML，并且应该执行 js。 Quentin 是对的，该线程有解决方案。

标签： javascript php ajax

【解决方案1】：

Krasimir Tsonev 有一个很好的解决方案，可以克服所有问题。他的方法不需要使用eval，所以不存在性能和安全问题。它允许您设置 innerHTML 字符串包含带有 js 的 html 并立即将其转换为 DOM 元素，同时还可以执行代码中存在的 js 部分。简短，简单，并且完全按照您的意愿工作。因此，在这种情况下，来自 ajax 的响应是 src 字符串，然后根据 Krasimir Tsonev 将其转换为 DOM 对象，然后您可以将其与执行的 js 部分一起使用。

 var el = str2DomElement(xmlhttp.responseText);
 document.body.innerHTML = el.innerHTML;

享受他的解决方案：

http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element

重要提示：

你需要用div标签包裹目标元素
你需要用div标签包裹src字符串。
如果你直接写src字符串，它包含js部分，请注意正确写结束脚本标签（在/之前），因为这是一个字符串。

【讨论】：

【解决方案2】：

下面是 3 个基本示例，说明您可以使用 ajax 做什么以及应该如何做：

主页面

function ajax(a,b,c){ // Url, Callback, just a placeholder
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onload=b;
 c.send()
}

function changeHTML(){
 document.getElementById('mytext1').innerHTML=this.response;
}

function executeJS(){
 (new Function(this.response))()
}

var array=[];
function loadJSON(){
 array=JSON.parse(this.response);
 updateFields();
}

function updateFields(){
 for(var a=0,b;b=array[a];++a){
  document.getElementById(b.id).textContent=b.data;
 }
}

window.onload=function(){
 ajax('getHTML.php',changeHTML);
 ajax('getJS.php',executeJS);
 ajax('getJSON.php',loadJSON);
 // even if this works you should execute ajax sequentially
}

html

<div id="mytext1"></div>
<div id="mytext2"></div>

getHTML.php

<?php
echo "<div>i'm html</div>";
?>

getJS.php

<?php
echo "var a='hello';alert(a);";
?>

getJSON.php

<?php
$arr=array(array('id'=>'mytext2','data'=>'data'));
echo json_encode($arr);//json_decode
?>

如果您想执行一个 javascript 函数，请使用 executeJS 函数并传递一个有效的 javascript 字符串。

不需要 EVAL！

提示：使用 json 您可以将函数作为数据传递，但由于解析不喜欢开头的字符串函数，所以一个不错的技巧是将 javascript 转换为 base64 并使用带有 atob(base64) 的 javascript 转换回普通字符串和有这样的东西：

function updateFields(){
 for(var a=0,b;b=array[a];++a){
  if(b.func){
   (new Function(atob(b.func)))()
  }else{
   document.getElementById(b.id).textContent=b.data;
  }
 }
}

php

<?php
$arr=array(
 array('id'=>'mytext2','data'=>'data'),
 array('func'=>base64_encode("alert('jsonfunc')"))
);
echo json_encode($arr);//json_decode
?>

也许有一些小错误......我现在写了。并且无法检查 ajax atm。

如果你有任何问题，尽管问！！

【讨论】：

感谢您提供非常详细的教学答案。无论如何，我可以从中学到很多东西。但是对于我出现的具体问题，请看我根据 Krasimir Tsonev 的回答。
你读过TIP的部分吗？这解释了如何同时发送 html 和 javascript。
是的。感谢这一点。您提供了几种可用于其他问题的技术，这是一套很好的工具。

【解决方案3】：

我想给你一个建议，你可以使用 javascript，你可以使用 jquery ajax，这对于 ajax 来说将是简单和最新的事情。

您可以使用 $.ajax 函数。您可以通过此功能轻松使用 json

【讨论】：

如果你没看错，他已经在用ajax了
谢谢，这是正确的，但我想深入研究纯代码（没有 jquery 以了解机制），然后，当然，为什么不呢。
好的。我只是让你了解 ajax 的新事物。因为当浏览器不支持 jquery 时使用这种类型的 ajax。 :)

【解决方案4】：

当您进行 AJAX 呼叫时，您会联系到服务器 url。如果您的 url 在这种情况下是一个 php 页面，它将在服务器上执行并返回到您的 AJAX 调用它生成的 HTML...现在您可以使用该 HTML 并管理它或发布到您当前的页面DOM。

-AJAX 是执行服务器代码的服务器调用。

-嵌入在 php 页面上的脚本标签是 HTML，当浏览器解析和执行时，它将执行它包含在客户端上的代码。

所以...您的代码没有执行，因为它从未被调用...对您的 AJAX 调用的响应将是准确的

<p id="demo">Hi there</p>
<script>
    document.write("Yes! Hi there");    
    alert('Welcome!');
</script>

php 页面执行并将其作为 text/html 返回到您的当前页面。

如果您想从您的 javascript 执行客户端代码，您应该将它放在同一个 .js 文件中或包含在另一个文件中，但如果您将它包含在服务器页面上，您需要将浏览器重定向到该页面，如果您使用 AJAX 调用它，代码将不会执行，因为客户端浏览器不会解析它。

【讨论】：