Question

使用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行：

本地主机/ test1.php

一切正常，显示html和js的文本，并显示一个单词Welcome的警告窗口！显示。

但如果我打电话给主页

本地主机/ main.html中

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

有人知道为什么会这样吗？感谢

Answer 1

以下是使用ajax＆amp; amp;你应该怎么做：

主要HTML

JS

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并返回到带有{{1}的javascript的普通字符串并且有这样的事情：

atob(base64)

PHP

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;
  }
 }
}

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

如果您有任何问题，请询问!!

Answer 2

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

您可以使用$ .ajax功能。您可以使用此功能轻松使用json

Answer 3

当您拨打AJAX电话时，请联系服务器网址。如果你的网址是一个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调用它，代码将不会执行，因为客户端浏览器不会解析它。

Answer 4

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部分，请注意正确编写结束脚本标记（使用\ before /），因为这是一个字符串。

当使用Ajax调用php文件时，php文件中的JavaScript不起作用

4 个答案: