XMLHttpRequest的结果消失了

时间:2011-09-27 09:08:41

标签: php xmlhttprequest

我正在尝试使用PHP。我已经登陆了客户端 - 服务器连接。

现在我有一个服务器端脚本,它将随机数学应用于通过XMLHttpRequest获取的x和y值:

<?php
    $farr = array(
        create_function('$x,$y', 'return "x + y = ".($x+$y);'),
        create_function('$x,$y', 'return "x - y = ".($x-$y);'),
        create_function('$x,$y', 'return "x * y = ".($x*$y);'),
        create_function('$x,$y', '$returnVal = "x / y = "; if($y==0){$returnVal.="NaN (y value = 0)";}else{$returnVal.=($x/$y);}return $returnVal;')        
    );

    $x = $_GET["x"];
    $y = $_GET["y"];
    $i = rand(0,3);
    try{
        $f = $farr[$i];
        $result = $f($x,$y);
        echo "".$result;
    } catch(Exception $e) {
        echo "An exception occurred while accessing functions";
    }
?>

当用户按下表单上的“发送”按钮时,客户端会调用此脚本:

<html>
    <head>
        <title>
            Welcome
        </title>
        <script type="text/javascript">
            function calculate(x, y){
                var xmlhttp;
                if( x.length==0){
                    document.getElementById("result").innerHTML = "x is not set";
                    return;
                }
                if(y.length==0){
                    document.getElementById("result").innerHTML = "y is not set";
                    return;
                }
                if(window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("result").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "math.php?x="+x+"&y="+y, true);
                xmlhttp.send(null);
            }
        </script>
    </head>
    <body>
        <form>
            x: <input type="text" name="x"/><br/>
            y: <input type="text" name="y"/><br/>
            <input type="submit" value="Send" onclick="calculate(x.value, y.value)"/> <input type="reset" value="Reset"/>
            <p>Result: <div id="result">something</div></p>
        </form>
    </body>
</html>

意图将结果放在表单末尾的div中。但是,我看到了一段时间的结果,然后它又消失了。我怀疑该页面是否正在重新加载,但这不是XMLHttpRequest的目的,只有onreadystatechanged回调中的部分才会被刷新?而不是整个页面?

1 个答案:

答案 0 :(得分:1)

那是因为您正在使用提交按钮..更改

<input type="submit" to <input type="button"