当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的serialize()方法获取。
HTML:
<form id="form"> ???????<table> ???????????<tr> ???????????????<td>姓名</td> ???????????????<td> ???????????????????<input type="text" name="name" value="张三" /> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>性别</td> ???????????????<td> ???????????????????<input type="radio" name="sex" value="male" checked />男 ???????????????????<input type="radio" name="sex" value="female" />女 ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>地区</td> ???????????????<td> ???????????????????<select name="area"> ???????????????????????<option value="heping" selected>和平区</option> ???????????????????????<option value="nankai">南开区</option> ???????????????????????<option value="xiqing">西青区</option> ???????????????????????<option value="hexi">河西区</option> ???????????????????</select> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>爱好</td> ???????????????<td> ???????????????????<input type="checkbox" name="hobby[]" value="movie" checked />电影 ???????????????????<input type="checkbox" name="hobby[]" value="music" checked/>音乐 ???????????????????<input type="checkbox" name="hobby[]" value="basketball" />篮球 ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td>个人介绍</td> ???????????????<td> ???????????????????<textarea name="intro">个人介绍一下吧</textarea> ???????????????</td> ???????????</tr> ???????????<tr> ???????????????<td></td> ???????????????<td> ???????????????????<input type="button" value="提交" id="submit" /> ???????????????</td> ???????????</tr> ???????</table></form>
Javascript:
????????$(function(){ ???????????????$("#submit").click(function(){ ???????????????var form=$("#form"); ???????????????var data=getFormData(form); ???????????????$.ajax({ //注意测试一下传输的data数据是js对象还是json对象格式 ???????????????}) ???????????}) ???????????// 获取表单数据 ???????????function getFormData(form){ ???????????????var data=form.serialize(); ???????????????data=decodeURI(data); ???????????????//name=张三&sex=male&area=heping&hobby[]=movie&hobby[]=music&intro=个人介绍一下吧 ???????????????var arr=data.split("&"); ???????????????//["name=张三", "sex=male", "area=heping", "hobby[]=movie", "hobby[]=music", "intro=个人介绍一下吧"] ???????????????var item,key,value,newData={}; ???????????????for(var i=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; ???????????????????} ???????????????} ???????????????return newData; ???????????????//{name: "张三", sex: "male", area: "heping", hobby: (2) ["movie", "music"], intro: "个人介绍一下吧"} ???????????} ???????})
快速获取表单多条数据,使用ajax传递给后台
原文地址:https://www.cnblogs.com/tizi/p/8732711.html