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

【问题标题】：Basic Ajax but not working with either GET or POST method基本 Ajax，但不能使用 GET 或 POST 方法
【发布时间】：2012-09-26 09:29:45
【问题描述】：

我知道那里有很多教程和相同的问题，但我尝试了很多次，但 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;
?>

【问题讨论】：

您的 HTML 文档格式不正确。开头的head 和最后的body 不可用。

标签： php ajax

【解决方案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>

【讨论】：

好的，谢谢，现在页面没有刷新，但我在结果输入标签中没有得到想要的结果
那是因为您没有发送帖子数据，请检查更新的答案
谢谢你现在我明白ajax是什么了:)

【解决方案2】：

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

其中大部分也适用于此。

希望这会有所帮助。

【讨论】：

我不能这样理解，那里有很多教程，请纠正我的脚本，我会指出我做错的地方，因为我是 AJAX 的大佬