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>

最后是ajax函数通过post：

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请求。

此外，您必须在致电setRequestHeader

后致电open

ajax和php之间的交互问题？

1 个答案: