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 相关文章推荐
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
js实现九宫格抽奖
Mar 19 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
python提取内容关键词的方法
2015/03/16 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python书籍信息爬虫实例
2018/03/19 Python
python+flask实现API的方法
2018/11/21 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python代码能做成软件吗
2020/07/24 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
电气自动化自荐信
2013/10/10 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
大学生求职信例文
2014/06/29 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
公司开除员工通知
2015/04/22 职场文书
第一节英语课开场白
2015/06/01 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL