JQuery.Ajax()的data参数类型实例详解


Posted in Javascript onNovember 20, 2015

假如现在有这样一个表单,是添加元素用的。

<form id='addForm' action='UserAdd.action' type='post'>
   <label for='uname'>用户名</label>:<input type='text' name='uname' id='uname'><br>
   <label for='mobileIpt'>手机号:</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
   <label for='birthday'>生日:</label><input type='text' name='birthday'><br>
   <input type='button' value='提交' onclick='addUser()'>
</form>

我们不想使用表单submit的方式添加这个元素,我们就想使用ajax提交。

以前我们是这样实现的:

function addUser(){
    var user = {
      uname:$("#uname").val(),
      mobileIpt:$("#mobileIpt").val(),
      birthday:$("#birthday").val()
    };
    $.ajax({
      url:'UserAdd.action',
      data:user,
      type:'post',
      dataType:'text',
      success:function(msg){
        if(msg=='1'){
          console.log('添加成功');
        }else{
          console.log('添加失败')
        }
      }
    })
  }

这没有什么错,就是获取表单元素的值实在是太麻烦....这里只有三项,很多项的时候就废了....

直到有一天,我发现了jquery的serializeArray方法

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。

我们来试试看

$('#addForm').serializeArray();
//返回数据结构,是json数组,每个对像分别name和value为key,代表这个表单元素的name和value
[
  {"name":"uname","value":""},
  {"name":"mobileIpt","value":""},  
  {"name":"birthday","value":""}
]

这个貌似用不上啊

我们使用JQuery.param()方法处理一下:

var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"

嘿这下符合我们的需求了吧,虽然不是json类型,但是至少可以作为data上传了。

这里我们可以直接在ajax的data处填上这个json数组,在jquery内部自己调用$.param()处理的。

我们来看下jquery.param()方法的说明:

返回值:StringjQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。
参数
obj,[traditional]
数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化。
traditional:是否使用传统的方式浅层序列化。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

看着说明,貌似也跟我们没关系啊,我们换一个json数组来看

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="

这个转换不成功了吧,为什么我们表单的那种数据能够成功转换成url参数呢?我们来看下jquery源码

//在ajax()方法中,对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
  s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
    // Serialize the form elements
    jQuery.each( a, function() {
      add( this.name, this.value );
    });
  } else {
    // If traditional, encode the "old" way (the way 1.3.2 or older
    // did it), otherwise encode params recursively.
    for ( prefix in a ) {
      buildParams( prefix, a[ prefix ], traditional, add );
    }
  }

这下明白了吧,如果是json数据,那么挨个循环,只取他们的name属性和value属性拼接字符串。

如果是普通对象,循环该对象的属性,然后拼接字符串。

总结:

所以,本文要说的是,在jquery的ajax函数中,可以传入3种类型的数据

1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12"

2.json对象:{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}

3.json数组:

[
  {"name":"uname","value":"alice"},
  {"name":"mobileIpt","value":"110"},  
  {"name":"birthday","value":"2012-11-11"}
]

所以,我们可以一键获取表单并提交,非常方便。

补充:

其实提取表单数据的话只需要serialize()方法直接获取"uname=alice&mobileIpt=110&birthday=1983-05-12"这样的就可以了。

ps:jquery中ajax方法data参数的用法小结

$.ajax({
  type: post,
  url: some.php,
  data: name=john&location=boston, //第一种方式传参
 // data: {name:john,location:boston} //第二种方式传参
 // data: {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2'
 /*
 第一种我们用url传参,参数里面如果加带&这个符号地话,可能参数接收不到或不完整,
 如“ data: name=john&location=boston,” 如果name地值是john&smith这样写可能就会有问题,
 我们可以用js里面地encodeuricomponent()方法进行转义,
 但如果用data: {name:john,location:boston}这种方式写地话就不需要进行转义,
 如果转义地话,接收地将是转义后地字符串
 */
  success: function(msg){
   alert( data saved: + msg );
  }
});
Javascript 相关文章推荐
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
vue-hook-form使用详解
Apr 07 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 #Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 #Javascript
jquery实现手风琴效果
Nov 20 #Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 #Javascript
jquery背景跟随鼠标滑动导航
Nov 20 #Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
JavaScript性能优化之小知识总结
Nov 20 #Javascript
You might like
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
从零开始做一个pagination分页组件
2017/03/15 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
django修改models重建数据库的操作
2020/03/31 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
《草原》教学反思
2014/02/15 职场文书
会议主持词
2014/03/17 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
爱我中华教学反思
2014/04/28 职场文书
学校搬迁方案
2014/06/15 职场文书
争先创优公开承诺书
2014/08/30 职场文书
学生吸烟检讨书
2014/09/14 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
新学期家长寄语2016
2015/12/03 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python