使用Ajax的Post方法发送多个值的问题

时间:2012-09-07 21:58:15

标签: javascript html ajax forms post

我的目标是通过ajax函数提交整个表单,然后将这些值发送到php文件。我使用Post有几个原因 - 一个是我将在MySQL数据库中更改数据。

我在寻找答案时看到了一些例子,但似乎没有一个例子能解决我直接遇到的问题。

例如,这个例子:

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

// Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

// Call a function when the state changes.
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

开始解决它。

具体来说,我不知道如何发送多个值。在我上面找到的例子中,我看到他们在变量params中将两个值硬编码到它们的语句中。我想知道如何将这些值传递给函数而无需对它们进行硬编码。

我的表格:

<table border="0" cellpadding="2" cellspacing="5">
    <th colspan="2" align="center">Check Out</th>
    <form name="checkOut" method="post" onSubmit="return(validate(this))"> 
        <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>Special Campaign</td>
            <td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/></td>
        </tr>
        <tr>
            <td><input type="button" onClick="clearForm()" value="Reset" /></td>
            <td><input type="submit" value="Check Out" /></td>
        </tr>
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
</table>

在这里,我想传递numberOut,fName,lName和specialC的值。我知道如何单独传递它们,但不是作为一个组。最后,我希望能够通过PHP使用$ _POST ['fName']来访问这些值。

从这个网站上看到类似问题的几个答案,很多人都说使用jQuery。我知道它更容易,但我想先学习使用ajax,因为我是基于网络的语言的新手。

1 个答案:

答案 0 :(得分:1)

您必须创建params

以下是您的示例代码

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";
}