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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 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安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
javascript 闭包
2011/09/15 Javascript
js常用代码段整理
2011/11/30 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
python 日志增量抓取实现方法
2018/04/28 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
法律专业推荐信范文
2013/11/29 职场文书
住房租房协议书
2014/08/20 职场文书
高三物理教学反思
2016/02/20 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers