jQuery通过ajax快速批量提交表单数据
当表单数据项很多时，手动获取表单项的值将变得效率低下，结合jQuery提供的函数serialize()，我们可以实现快速获取数据并提交表单数据。
请看下面的表单：
<formid="fm"> <table> <tr> <td>姓名</td> <td> <inputtype="text"name="name"/> </td> </tr> <tr> <td>年龄</td> <td> <inputtype="text"name="age"/> </td> </tr> <tr> <td>密码</td> <td> <inputtype="password"name="password"/> </td> </tr> <tr> <td>性别</td> <td> <inputtype="radio"name="sex"value="male"/>男 <inputtype="radio"name="sex"value="female"/>女 </td> </tr> <tr> <td>地区</td> <td> <selectname="area"> <optionvalue="heping">和平区</option> <optionvalue="nankai">南开区</option> <optionvalue="xiqing">西青区</option> <optionvalue="hexi">河西区</option> </select> </td> </tr> <tr> <td>爱好</td> <td> <inputtype="checkbox"name="hobby[]"value="movie"/>电影 <inputtype="checkbox"name="hobby[]"value="music"/>音乐 <inputtype="checkbox"name="hobby[]"value="basketball"/>篮球 </td> </tr> <tr> <td>个人介绍</td> <td> <textareaname="intro"></textarea> </td> </tr> <tr> <td></td> <td> <inputtype="button"value="提交"id="submit"/> </td> </tr> </table> </form>
我们可以通过自定义函数getFormData()来获取表单的数据，请看下面的例子：
$(function(){
$('#submit').click(function(){
//选取表单
varform=$('#fm');
//获取表单数据
vardata=getFormData(form);
//发送AJAX请求
$.post('test.php',data,function(data){
console.log('ok');
});
});
});
getFormData()的实现很简单：
functiongetFormData(form){
vardata=form.serialize();
data=decodeURI(data);
vararr=data.split('&');
varitem,key,value,newData={};
for(vari=0;i<arr.length;i++){
item=arr[i].split('=');
key=item[0];
value=item[1];
if(key.indexOf('[]')!=-1){
key=key.replace('[]','');
if(!newData[key]){
newData[key]=[];
}
newData[key].push(value);
}else{
newData[key]=value;
}
}
returnnewData;
}
test.php接收到的数据将会是：
Array ( [name]=>3241324 [age]=>m_admin [password]=>123 [sex]=>male [area]=>heping [hobby]=>Array ( [0]=>movie [1]=>music ) [intro]=>321432423 )
和普通的表单提交的数据格式是一样的，我们可以很方便的进行处理！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。