我正在开发一个表单,它通过 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>