5

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

用户.php

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

任何帮助将不胜感激，并提前感谢您的帮助:)

4

9 回答 9

1

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

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

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

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

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

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

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

于 2013-03-18T04:35:23.047 回答
0

尝试

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

交换 === 与 ==

于 2013-03-19T15:44:57.967 回答
0

不幸的是，您不能像已经告知的那样简单地使用 innerHTML 来附加脚本。您最好的选择是使用一些 DOM 处理程序，例如 jQuery，它可以非常轻松地处理 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>");

~干杯~

于 2013-04-01T21:56:20.450 回答
0

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

这样，所有异步添加的脚本都将得到评估。

于 2013-03-20T15:08:11.533 回答
0 
<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>
于 2013-03-21T11:10:58.980 回答
0

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

编辑：

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

于 2013-03-16T09:44:54.363 回答
0

我认为您动态添加到页面的“脚本”标签不会被解析和执行。但是您可以从您的 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");
}
于 2013-03-16T08:48:11.100 回答
0

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

于 2013-03-27T18:02:41.047 回答
0

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

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

显然，如果这可行，您将需要确保有要附加的数据，否则您可能会收到错误消息。

我经常在我通过 AJAX 检索的 PHP 片段文件中使用脚本，并且我发现它们在我将它们附加到某些东西之前永远不会工作。我从来没有尝试过只返回一个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);
于 2013-03-16T09:04:58.153 回答