Question

我有一个下拉选择列表和一个按钮，我在其中插入了一个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";
}
?>

任何帮助都会非常感激，并感谢您的帮助：）

Answer 1

所以，正如Chris已经指出的那样，如果你使用你所描述的AJAX调用来返回一些文本，你可以将它放在你的页面中，并进行DOM更新，例如你有：

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

有效。但是如果你的responseText包含javascript，它只会被发布到文档中。您的页面已经完成加载，因此不会执行。

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

从您的问题中不清楚您想要控制警报的逻辑。如果您希望警报为选择的某些选项说“Hello”而对其他选择说“No”，那么您可以只测试您的选择输入：

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

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

Answer 2

我不认为您动态添加到页面的“脚本”标记将被解析和执行。但是你可以从user.php返回一个json对象，包括你的答案（是/否）。然后你可以决定在onreadystatechanged回调中显示什么。或者只返回“是”/“否”并执行以下操作：

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

并在您的主页中：

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

Answer 3

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

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

显然，如果这样做，你需要确保有附加数据，否则你可能会收到错误。

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

编辑：当我意识到您没有使用jQuery时，将代码示例更改为Javascript。实际上我没有在没有jQuery的情况下很长时间没有这样做，所以我不完全确定它会起作用，但无论如何都要试一试。我认为使用appendChild()和innerHTML会产生不同的结果。

再次编辑：我再次对此进行了测试，因为我目前无法对其进行测试，但是将xmlhttp.responseText包裹在document.createDocumentFragment()中可能会有效：

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

Answer 4

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

编辑：

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

Answer 5

尝试

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

使用==

交换===

Answer 6

问题是使用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);
            }
        }
    }

这样就可以评估所有异步添加的脚本。

Answer 7

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

Answer 8

尝试运行Fiddler以查看服务器之间的流量/输出。这样可以深入了解user.php的输出是什么？这可以帮助调试。

Answer 9

不幸的是，您不能简单地使用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>");

〜欢呼〜

在ajax中包含php文件时，Javascript无法正常工作

9 个答案: