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 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
vue生命周期的探索
Apr 03 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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中文字符串截取方法实例总结
2014/09/30 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python装饰器语法糖
2019/01/02 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
竞聘书格式及范文
2014/03/31 职场文书
学校火灾防控方案
2014/06/09 职场文书
家长会欢迎标语
2014/06/24 职场文书
自我管理的活动方案
2014/08/25 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
荆州古城导游词
2015/02/06 职场文书
导师鉴定意见
2015/06/05 职场文书