利用jQuery中的serialize方法大量获取页面中表单的数据,发送的服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="ifm" name="ifm">
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" value="李四"/></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="age" value="22"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" value="123456"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="male" id="male" checked="" />
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td>地区:</td>
<td>
<select name="area" id="area">
<option value="锦江区" selected>锦江区</option>
<option value="金牛区">金牛区</option>
<option value="青羊区">青羊区</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" id="move" value="move" name="habb" checked/>
<label for="move">电影</label>
<input type="checkbox" id="music" value="music" name="habb" checked/>
<label for="music">音乐</label>
<input type="checkbox" id="basketball" value="basketball" name="habb[]"/>
<label for="basketball">篮球</label>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td><textarea name="txt" id="txt" cols="30" rows="2">WEB前段攻城师</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="提交" id="btn"/></td>
</tr>
<tr>
<td><button>123</button></td>
<td></td>
</tr>
</table>
</form>
<script src="jquery-1.11.1.js"></script>
<script>
function getData(){
var frm = $('#ifm');
var data = frm.serialize();
var arr = data.split('&');
var item,key,value,newData = {};
for(var i = 0; i < arr.length; i++){
item = arr[i].split('=');
key = decodeURI(item[0]);
value = decodeURI(item[1]);
if(key.indexOf('[]')!= -1){
key.replace('[]','');
if (!newData[key]){
newData[key]=[];
}
newData[key].push(value);
}else{
newData[key]=value;
}
}
return newData;
}
$('#btn').bind('click',function(){
var newdata=getData();
$.post('test.php',newdata,function(){
console.log('success');
});
});
</script>
</body>
</html>
test.php响应的数据是这样的