首页 > 编程 > JavaScript > 正文

jQuery通过ajax快速批量提交表单数据

2019-11-20 08:40:14
字体:
来源:转载
供稿:网友

当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据。

请看下面的表单:

<form id="fm"> <table> <tr>  <td>姓名</td>  <td>  <input type="text" name="name" />  </td> </tr> <tr>  <td>年龄</td>  <td>  <input type="text" name="age" />  </td> </tr> <tr>  <td>密码</td>  <td>  <input type="password" name="password" />  </td> </tr> <tr>  <td>性别</td>  <td>  <input type="radio" name="sex" value="male" />男  <input type="radio" name="sex" value="female" />女  </td> </tr> <tr>  <td>地区</td>  <td>  <select name="area">   <option value="heping">和平区</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" />电影  <input type="checkbox" name="hobby[]" value="music" />音乐  <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>

我们可以通过自定义函数getFormData()来获取表单的数据,请看下面的例子:

$(function(){ $('#submit').click(function(){ //选取表单 var form = $('#fm'); //获取表单数据 var data = getFormData(form); //发送AJAX请求 $.post('test.php',data,function(data){  console.log('ok'); }); });});

getFormData()的实现很简单:

function getFormData(form){ var data = form.serialize(); data = decodeURI(data); var arr = data.split('&'); 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;}

test.php接收到的数据将会是:

Array( [name] => 3241324 [age] => m_admin [password] => 123 [sex] => male [area] => heping [hobby] => Array (  [0] => movie  [1] => music ) [intro] => 321432423)

和普通的表单提交的数据格式是一样的,我们可以很方便的进行处理!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表