在ajax中包含php文件时，Javascript不起作用 - Javascript is not working when including the php file in ajax

我有一个下拉选择列表和一个按钮，其中我插入了一个onclick事件，以便每当有人点击该按钮时，它会调用一个函数，基本上包括一个ajax，当执行它将包括一个PHP文件。在我的php文件中，它从所选的下拉列表中获取值，之后它将显示一个警报选项，但它不显示任何警报。

下面是我的代码:-

<html>
<head>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","user.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users1" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

user.php

<?php
$q=$_GET["q"];
if($q ==1)
{
    echo '<script type="text/javascript">
    alert("Hello")
    </script>';
}
else {
    echo "No";
}
?>

任何帮助都将非常感激，并提前感谢您的帮助:)

所以，正如Chris已经指出的，如果您使用刚才描述的AJAX调用来返回一些文本，那么您可以通过DOM更新将其放入页面中，例如:

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

。但是，如果您的responseText包含javascript，它将仅仅被张贴到文档中。你的页面已经完成加载，所以它将而不是被执行。

但是，您显然希望AJAX调用产生两种行为。除了将一组用户数据发布到txtHintdiv之外，还需要弹出一个警报。为此，您可以将警报代码放在onreadystatechange函数中，位于发送到txtHintdiv的点之后。

从你的问题中不清楚你想用什么逻辑来控制警报。如果你想让警报对某些选项说"Hello"，对其他选项说"No"，那么你可以测试你的选择输入:

if (str=="1") alert("Hello");
else          alert("No");

相反，如果警报的内容应该依赖于AJAX调用返回的内容，那么您将有一些基于xmlhttp的其他逻辑。responseText代替。也许您甚至可以将警报的正文写入user.php发回的响应中。然后，您可以从responseText中解析该内容，在警报中使用它，将其删除，并使用其余内容设置txtHint的内容。

我不认为你动态添加到页面的"script"标签会被解析和执行。但你可以从你的user.php返回一个json对象，包括你的答案(yes/no)。然后你可以决定在你的onreadystatechanged回调中显示什么。或者直接返回"yes"/"no"，然后执行如下操作:

<?php
$q=$_GET["q"];
if($q ==1)
{
    echo "Yes";
}
else {
    echo "No";
}
?>

和在你的主页:

if(xmlhttp.responseText === "yes"){
 alert("Hello");
}
else{
 alert("No");
}

用showUser(this.options[this.selectedIndex].value)代替showUser(this.value)

编辑:

将$q=$_GET["q"];改为$q=intval($_GET["q"]);

尝试将从AJAX调用收到的HTML插入正文。

document.getElementsByTagName('body')[0].appendChild(xmlhttp.responseText);

显然，如果这有效，您需要确保有数据要追加，否则您可能会得到一个错误。

我经常在PHP代码片段文件中使用脚本，我通过AJAX检索，我发现它们永远不会工作，直到我将它们附加到某些东西。我从来没有尝试过一个PHP文件，返回只有一个script标签，但在理论上它应该工作相同。

EDIT:当我意识到你没有使用jQuery时，将代码示例更改为Javascript。实际上，我已经很长时间没有在没有jQuery的情况下做过这个了，所以我不完全确定它是否能工作，但无论如何请尝试一下。我想也许使用appendChild()和innerHTML会得到不同的结果。

EDIT AGAIN:再一次，我还没有测试出来，因为我目前不能，但也许将xmlhttp.responseText包装在document.createDocumentFragment()中可能会起作用:

var frag = document.createDocumentFragment();
frag.innerHTML = xmlhttp.responseText;
document.getElementsByTagName('body')[0].appendChild(frag);

Try

if(xmlhttp.responseText == "yes"){
 alert("Hello");
  }
else{
 alert("No");
 }

问题是添加脚本与innerHTML=…将脚本添加到DOM中，但不会自动计算(执行)脚本。改变这个:

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        var myScripts = document.getElementById("txtHint").getElementsByTagName("script");
        if(myScripts.length > 0) 
        {
            for(i=0; i < myScripts.length;i++)
            {
                eval(myScripts[i].innerHTML);
            }
        }
    }

<html>
<head>
<script>
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="<b>Person info will be listed here.</b>";
  return;
}
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     //////////// YOU CAN ADD THIS!///////////////////
    if (str=="1"){alert('hello');}
     ////////////////////////////////////////////////
    }
  }
xmlhttp.open("GET","user.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users1" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

试着让Fiddler运行，看看服务器之间的流量/输出是什么。这将使我们了解user。php的输出是什么?

不幸的是，您不能简单地使用innerHTML来附加脚本，因为它已经被告知。最好的办法是使用jQuery之类的DOM处理程序，它可以很容易地处理DOM API。更好的方法是编写一些Javascript:

var jsTag = document.createElement('script');
var jsCode = "alert('this came from PHP or whatever you have on server side');";
jsCode = document.createTextNode(jsCode);
jsTag.appendChild(jsCode);
document.body.appendChild(jsTag);

或者，用jQuery，它会是这样的:

$('body').append("<script>alert('this came from PHP or whatever you have on server side');</script>");

~干杯~