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


Posted in Javascript onOctober 25, 2016

当表单数据项很多时,手动获取表单项的值将变得效率低下,结合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
)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 #Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 #Javascript
微信小程序 video组件详解
Oct 25 #Javascript
微信小程序 form组件详解
Oct 25 #Javascript
微信小程序 icon组件详细及实例代码
Oct 25 #Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 #Javascript
微信小程序  网络请求API详解
Oct 25 #Javascript
You might like
php xml 入门学习资料
2011/01/01 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
JS实现图片切换特效
2019/12/23 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
分享6个隐藏的python功能
2017/12/07 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python psutil模块使用方法解析
2019/08/01 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
机关出纳岗位职责
2014/04/03 职场文书
房产委托公证书
2014/04/08 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
雾霾停课通知
2015/04/24 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis