从单独的.php文件</script>执行<script>

时间:2013-11-11 22:00:44

标签: javascript php html

现在正在研究(似乎是)一个简单的问题几天,可以使用一些帮助。

我按下一个按钮点击一个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();

3 个答案:

答案 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?它应该进入你的文档的头部。现在,它看起来没有具体说明。