如何使用AJAX将信息发送到PHP脚本？

Question

我无法运行简单的ajax脚本。 代码应该很简单。 Ajax脚本是：

<html>

<head><title>Testing ajax</title>

    <script type="text/javascript">

        function ajax() {

            var xmlhttp;

            var fname=document.getElementById("fname").value;

            if(window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {

                if (xmlhttp.readyState==4 && xmlhttp.status==200) {

                    document.getElementById("output").innerHTML=xmlhttp.responseText;

                }

            }

            xmlhttp.open("GET","ajax.php?fname="+fname,true);
            xmlhttp.send();

        }

    </script>

</head>

<body>


    <form>

        <input type="text" id="fname">

        <input type="text" id="lname">

        <input type="submit" id="submit" onclick="ajax()">


    </form>


    <div id="output"></div>


</body>

而PHP脚本是：

<?php

$fname=$_GET['fname'];

echo "<p>Hello ".$fname."</p>";

?>

我也尝试过：

xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/pass-data");
xmlhttp.send("fname="+fname);

我无法获得发布信息的方法。 我看不到简单的东西吗？

Answer 1

它不起作用的原因是由于您将输入放在<form>标记内。 删除表单标记后，当我尝试将您的代码的<input type="submit" />控件更改为

<input type="button" onClick="ajax()" value="Submit" />

它就像一个魅力。 我怀疑由于提交时的某些好处，安全问题等，表单行为的处理方式有所不同。

Answer 2

将输入类型从提交更改为按钮

输入type =“ button” onclick = ...

因为当您单击按钮时，如果type =“ submit”，它将立即提交页面。