为Ajax POST序列化多个选择框

时间:2012-10-02 14:19:42

标签: javascript jquery html

我会用一个玩具示例来说明我的问题:

我有一个表单,可以获取有关用户的一些详细信息:

<form action="#" method="post" id="myform">
    <input type="text" name="fname" />
    <input type="text" name="sname" />
    <input type="text" name="birthdate" />
    <select name="hobbies">
        <option>Programming</option>
        <option>Eating cats</option>
        <option>Explaining string theory to my grandmother</option>
    </select>
</form>

我将通过ajax调用将其发送到我的服务器,这样我就可以在没有页面刷新的情况下给出某种响应:

$.post("myserverscript.php", $('#myform').serialize(), function(){...callback...});

这很好用。

现在,我需要在同一页面上获取有关多个用户的相同信息。没问题,我只需在输入名称中添加[]

<form action="#" method="post" id="myform">
    <input type="text" name="fname[]" />
    <input type="text" name="sname[]" />
    <input type="text" name="birthdate[]" />
    <select name="hobbies[]">
        <option>Programming</option>
        <option>Eating cats</option>
        <option>Explaining string theory to my grandmother</option>
    </select>
</form>

同样,世界的一切都很好。

现在,我希望允许用户分别选择多个爱好:

<form action="#" method="post" id="myform">
    <input type="text" name="fname[]" />
    <input type="text" name="sname[]" />
    <input type="text" name="birthdate[]" />
    <select name="hobbies[]" multiple>
        <option>Programming</option>
        <option>Eating cats</option>
        <option>Explaining string theory to my grandmother</option>
    </select>
</form>

这就是事情开始变得有点梨形的地方。当我现在打电话给serialize()时,所有的爱好都放在一个阵列中 - 所以我无法说出哪个用户有哪些爱好。

我尝试使用[][]代替[]但是只是将每个单独的项放入爱好数组中自己的数组中,这样我仍然会失去用户 - &gt;爱好链接。

我能看到这样做的唯一方法就是编写自己的serialize(),根据需要对事物进行分组。

有更好,更简单或更优雅的方法吗?

2 个答案:

答案 0 :(得分:1)

我的标准方法是将UserID附加到输入名称,并在它们之间加下划线。

所以,而不是:

<input type="text" name="fname[]" />

它将是:

<input type="text" name="fname_23423" />

然后,在服务器端,您在_上拆分输入名称。第一个元素是输入名称,第二个元素是UserID,你们都已经设置好了。

答案 1 :(得分:1)

我遇到了类似的问题,但我这样做的方法是为每个用户分配一个特定的数组

例如this fiddle

<form action="#" method="post" id="myform">
    <input type="text" name="user1[fname]" />
    <input type="text" name="user1[sname]" />
    <input type="text" name="user1[birthdate]" />
    <select name="user1[hobbies]" multiple>
        <option>Programming</option>
        <option>Eating cats</option>
        <option>Explaining string theory to my grandmother</option>
    </select>
    <a href="#" id="submit">Submit</a>
</form>