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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
浅谈javascript的闭包
Jan 23 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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学习之 循环结构实现代码
2011/06/09 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
django在开发中取消外键约束的实现
2020/05/20 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
文明礼仪事迹材料
2014/01/09 职场文书
文体活动总结范文
2014/05/05 职场文书
应急管理培训方案
2014/06/12 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
辞职信标准格式
2015/02/27 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
小学三年级语文教学反思
2016/03/03 职场文书