我将使用一个玩具示例来说明我的问题:
我有一个表单,可以获取有关用户的一些详细信息:
<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()
时,所有爱好都会放入一个数组中 - 因此我无法说出哪个用户有哪些爱好。
我尝试使用 [][]
而不是 []
但这只是将每个单独的项目放入爱好数组中它自己的数组中,所以我仍然丢失了用户->爱好链接。
我能想到的唯一方法是编写自己的 serialize()
,它可以根据需要对事物进行分组。
是否有更好、更简单或更优雅的方法来做到这一点?
最佳答案
我的标准方法是将 UserID
附加到输入名称,并在它们之间使用下划线。
所以,而不是这个:
<input type="text" name="fname[]" />
这将是:
<input type="text" name="fname_23423" />
然后,在服务器端,您将输入名称拆分为 _
。第一个元素是输入名称,第二个元素是 UserID
,一切都已准备就绪。
关于javascript - 为 Ajax POST 序列化多个选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12692100/