ajax 和 php 之间的交互问题？

Question

我正在开发一个表单，它通过 post 将多个用户输入提交到数据库并由 php 处理。为此，我使用了 ajax（我知道 jquery 有时更容易，但我更愿意先掌握 ajax）。

但是，它不能正常工作 - 即它根本不能工作。我知道当表单没有通过 ajax 传递时，php 文件可以正常工作。

这就是我现在所拥有的——表单本身：

<table border="0" cellpadding="2" cellspacing="5">
                <th colspan="2" align="center">Check Out</th>
                <form name="checkOut" method="post" onSubmit="return(validate(this))" action=""> 
                    <tr><td>Territory Number</td><td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
                    </tr><tr><td>First Name of Publisher</td><td><input type="text" onKeyUp="showHint(this.value)" name="fName" tabindex="2" maxlength="15"/></td>
                    </tr><tr><td>Last Name of Publisher</td><td><input type="text" onKeyUp="showHint_l(this.value)" name="lName" tabindex="3" maxlength="15" /></td>
                    </tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
                    </tr><tr><td><input type="button" onClick="clearForm()" value="Reset" /></td><td><input type="submit" value="Check Out" /></td>
                </form>
                <p>Suggestions: <span id="txtHint"></span></p>
            </table>

javascript/ajax 处理函数：

<script type="text/javascript">
        function validate(form)
        {
            fail = validateTerrNum(document.checkOut.numberOut.value);
            fail += validateFirstName(document.checkOut.fName.value);
            fail += validateLastName(document.checkOut.lName.value);
            if (fail == "")
            {
                //Begin preparing values for submission to server
                var params = "numberOut="+document.getElementsByName("numberOut")[0].value;
                    params+="?fName="+document.getElementsByName("fName")[0].value;
                    params+="?lName="+document.getElementsByName("lName")[0].value;
                var isSc = document.getelementsByName("specialC")[0].checked;
                if(isSc)
                {
                    params+="?specialC=Yes";
                }

                //Send those values to the server
                checkOut(params);
                return true;            
            }           
            else 
            {
                alert(fail);
                return false;
            }
        }
    </script>

最后是通过 post 的 ajax 函数：

function checkOut(params)
{
var urlString = params;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("test").innerHTML=xmlhttp.responseText; 
    }
}
//Setup for post submission 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.open("POST","checkOut.php",true);
xmlhttp.send(urlString);
}

我怀疑我没有正确提交发布请求。我已经让其他 ajax 函数正确地使用此表单，但它是通过 get - 我确实想使用 post，因为它正在更改数据库中的数据。

如果有人对此有所了解，将不胜感激。

编辑：带有通用按钮的新表单：

<table border="0" cellpadding="2" cellspacing="5">
                <th colspan="2" align="center">Check Out</th>
                <form name="checkOut" method="post" action=""> 
                    <tr><td>Territory Number</td><td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
                    </tr><tr><td>First Name of Publisher</td><td><input type="text" onKeyUp="showHint(this.value)" name="fName" tabindex="2" maxlength="15"/></td>
                    </tr><tr><td>Last Name of Publisher</td><td><input type="text" onKeyUp="showHint_l(this.value)" name="lName" tabindex="3" maxlength="15" /></td>
                    </tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
                    </tr><tr><td><input type="button" onClick="clearForm()" value="Reset" /></td><td><input type="button" onClick="return(validate(this))" value="Check Out"/></td>
                </form>
                <p>Suggestions: <span id="txtHint"></span></p>
            </table>

Answer 1

如果您通过 ajax 发布数据，则必须取消表单提交，否则表单将提交，这可能会取消您的 ajax 请求。

您还必须在拨打open 后拨打setRequestHeader