Question

我知道那里有很多教程和相同的问题，但我已经尝试了很多次，并且ajax没有用。 plz更正我的脚本：这是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;
?>

Answer 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>

Answer 2

请check my answer here 提出php和mysql中类似使用ajax的问题。希望有所帮助。它详细解释了完整的代码。

其中大部分内容也适用于此。

希望这有帮助。

基本Ajax但不能使用GET或POST方法

2 个答案: