0

我知道那里有很多教程和相同的问题，但我尝试了很多次，ajax 没有工作。请纠正我的脚本：这里是 index.php

<?php
echo'
<script type="text/javascript">
function ajax()
{
var xmlhttp;

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","ajax.php",true);
  xmlhttp.send();

    }
</script>

</head>

<body>
<p>&nbsp;</p>
<form id="form1" name="form1" method="post" action="" onsubmit="return ajax()">
  <p>
    <label for="num2">number 1</label>
    <input type="text" name="num1" id="num2" />
    *
  <label for="num3">number 2</label>
  <input type="text" name="num2" id="num3" />
    =
  <label for="result">Result</label>
  <input type="text" name="result" id="result" />
  </p>
  <p>
    <input type="submit"  value="Submit" />
  </p>
</form>';
?>

这是 ajax.php，它采用两个变量并将它们相乘并回显结果，但我的页面重新刷新并没有看到任何东西

    <?php
    $num1=$_POST["num1"];
    $num2=$_POST["num2"];

    $result=$num1*$num2;
    echo $result;
?>
4

2 回答 2

1

发生这种情况是因为function ajax()不返回任何内容，因此表单继续提交。

在函数结束前添加return false;

正确代码：

<html>
<head>

<script type="text/javascript">
function ajax(){
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("result").value=xmlhttp.responseText;
        }
    }
    var params = "num1="+document.getElementById('num2').value+"&num2="+document.getElementById('num3').value;
    xmlhttp.open("POST","ajax.php",true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
    return false;
}
</script>

</head>

<body>
    <p>&nbsp;</p>
    <form id="form1" name="form1" method="post" action="" onsubmit="return ajax()">
        <p>
            <label for="num2">number 1</label>
            <input type="text" name="num1" id="num2" />
            *
            <label for="num3">number 2</label>
            <input type="text" name="num2" id="num3" />
            =
            <label for="result">Result</label>
            <input type="text" name="result" id="result" />
            </p>
            <p>
            <input type="submit"  value="Submit" />
        </p>
    </form>
</body>
</html>
于 2012-09-26T09:31:45.710 回答
0

请在此处查看我php对在和中使用 ajax 的类似问题的回答mysql。希望有帮助。它详细解释了完整的代码。

其中大部分也适用于此。

希望这可以帮助。

于 2012-09-26T09:34:58.910 回答