现在正在研究(似乎是)一个简单的问题几天,可以使用一些帮助。
我按下一个按钮点击一个php文件,执行一堆服务器端操作,并希望在php结束时更改HTML中的一些内容(更改图像,更改文本,启用按钮等) 。)
所以,我正在尝试做的(对于这里的测试用例)是两次更改图像。它在第一组代码(html文件中的脚本)中工作正常,但它在第二组代码(php文件中的脚本)中不起作用。即,我在页面加载时看到oldImage,在单击按钮时看到secondImage,但我从未看到newImage。
<button onclick="test()">Try The Test</button>
<img id="myImage" src="oldImage.jpg">
<script>
function test()
{
var img = document.getElementById('myImage');
img.src = 'secondImage.jpg';
xmlhttp=new XMLHttpRequest();
xmlhttp.open("testPhp.php",true);
xmlhttp.send();
}
</script>
这是myPhp.php(我的代码中的所有行都在这里;为了便于阅读,这里有两行):
$script = "<script> var img = document.getElementById('myImage');
img.src = 'newImage.jpg'; </script?";
echo $script;
关于为什么myPhp.php中的脚本不起作用的任何想法?
修改 我将HTML部分更改为此部分,然后将myPhp.php更改为echo“Hello World”,这在myDiv中显示得很好。但是,我似乎无法回应剧本。有没有办法做到这一点?
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","portTester.php",true);
xmlhttp.send();
答案 0 :(得分:4)
如果您的ajax调用返回标记,为了使其有效,则必须将其添加到DOM中。
但我不建议这样做。相反,让您的PHP文件返回信息(而不是脚本),然后让接收信息的代码(在XHR对象的onreadystatechange
处理程序中)读取该信息并获取相关行动。
例如,您的PHP可以简单地返回:
newImage.jpg
然后你的ajax调用将是:
function test()
{
var img = document.getElementById('myImage');
img.src = 'secondImage.jpg';
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = handleReadyStateChange;
xmlhttp.open("testPhp.php",true);
xmlhttp.send();
function handleReadyStateChange() {
if (xmlhttp.readyState === 4 && xmlhttp.status >= 200 && xmlhttp.status < 400) {
// Request is complete and successful
img.src = xmlhttp.responseText;
}
}
}
如果您需要发送更丰富的信息(通常是这种情况),请查看使用JSON。
答案 1 :(得分:3)
您对AJAX通话的响应没有做任何事情。换句话说:您正在调用PHP脚本,回复被打印,但被丢弃,因为您的Javascript没有对它做任何事情。您必须添加一些代码才能与回复进行交互。这里有一个提示:不要尝试从PHP输出Javascript,输出你在Javascript中使用的东西。
在xmlhttp.send()
致电后将其添加到您的Javascript中:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myImage").src = xmlhttp.responseText;
}
}
在PHP脚本中,只需输入:
echo 'newImage.jpg';
答案 2 :(得分:-1)
一个可能的问题是,您在test()
onclick
之后错过了分号。此外,您的</script>
标记格式错误;它会在</script?
读取时显示</script>
。此外,进入DOM的是echo
?它应该进入你的文档的头部。现在,它看起来没有具体说明。