jQuery.Ajax()的data参数类型详解

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

<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"这样的就可以了。

以上所述是小编给大家介绍的jQuery.Ajax()的data参数类型详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Jquery+ajax请求data显示在GridView上(asp.net)

    AJAXLoadProgressForm.aspx: 复制代码 代码如下: <script src="JS/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function ShowProgressDiv() { var ID = $("input#idtxt").val();

  • Asp.net下使用Jquery Ajax传送和接收DataTable的代码

    服务器再把GridView反构造成DataTable, 再给DataTable增加一行之后,绑定到GridView,然后发回客户端... 能不能简单一点呢? 在使用Ajax数据请求数据,通常都是简单格式,比如String,信息量较少.当然也可以请求回XML,但是XML数据冗余多,取到客户端处理比json麻烦的多. 能不能简单一点呢? 上面这些问题,如果DataTable与JSON类型可以方便的相互转换,都可以迎刃而解了. 优点:1)避免不必要的回传: 2)精简异步请求数据的大小 : 3)解决数据

  • jQuery ajax dataType值为text json探索分享

    复制代码 代码如下: <dt style="margin:15px 0px 3px; padding:0px; border:0px; font-weight:bold; color:rgb(4,121,167); font-family:Verdana,Arial,宋体; background-color:rgb(249,249,249)">dataType 类型:String 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来

  • JQuery DataTable删除行后的页面更新利用Ajax解决

    使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa

  • JQuery中Ajax()的data参数类型实例分析

    本文实例分析了JQuery中Ajax()的data参数类型.分享给大家供大家参考,具体如下: 前面简单分析介绍了<ajax中data传参的两种方式>,对于ajax参数传递方式有了初步的了解,这里就来进一步分析一下ajax中data参数的类型. 假如现在有这样一个表单,是添加元素用的. <form id='addForm' action='UserAdd.action' type='post'> <label for='uname'>用户名</label>:&

  • 使用jquery的ajax需要注意的地方dataType的设置

    昨天在做ajax时遇到问题, 复制代码 代码如下: <SPAN style="WHITE-SPACE: pre"> </SPAN>$.ajax({ url:'<{$weburl}>/main.php?action=getDepart&cid='+cid, type:'post', dataType:'json', success:function(data){ //data=eval('('+data+')'); if(data.s==1)

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

    假如现在有这样一个表单,是添加元素用的. <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'

  • Jquery中ajax方法data参数的用法小结

    复制代码 代码如下: $.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston", //第一种方式传参  // data: {name:"John",location:"Boston"}  //第二种方式传参  // data: {foo:["bar1", "bar2&q

  • jQuery.Ajax()的data参数类型详解

    假如现在有这样一个表单,是添加元素用的. <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'

  • jQuery ajax的功能实现方法详解

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个ajax方法,他可以简单的get,post,jsonp请求就可以啦~~ var ajax = function () { // 做一些初始化,定义一些私有函数等 return function () { //

  • jquery ajax局部加载方法详解(实现代码)

    在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

  • Python中函数的参数类型详解

    Python中函数的参数类型详解

    目录 1.Python的函数参数的类型 2.Python的必传参数 3.关键字参数 4.默认参数 5.不定长参数 1.Python的函数参数的类型 必传参数:调用函数时必须传入的参数,函数定义时只定义参数名 关键字参数:传入时以函数的参数名值对的方式传入 默认参数:函数定义时为参数默认设置一个值,调用时不传输参数即以默认值处理 不定长参数:以*修饰或者**修饰的参数;*修饰的参数是一个元组(tuple),**修饰的参数必须是字典(dict),通常写作*args或者**args 2.Python的

  • jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result){    $.each(result, function(i, field){      $("div").append(field + " ");    });  });

  • jquery Ajax 全局调用封装实例详解

    前言: 有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquer

  • jQuery 数据缓存data(name, value)详解及实现

    作为一名程序员,一提到"缓存"你很容易联想到"客户端(浏览器缓存)"和"服务器缓存".客户端缓存是存在浏览者电脑硬盘上的,即浏览器临时文件夹,而服务器缓存是存在服务器内存中,当然在一些高级应用场合也有专门的缓存服务器,甚至有利用数据库进行缓存的实现.当然这些都不在本文的讨论范围,本文要讨论的是最流行的JavaScript框架jQuery的数据缓存实现原理,这是jQuery1.2.3版开始加入的新功能. 一. jQuery数据缓存的作用 jQuer

  • 关于jQuery.ajax()的jsonp碰上post详解

    关于jQuery.ajax()的jsonp碰上post详解

    前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与jsonp 跨域:由于受到同源策略(协议.域名.端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了.跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明. jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,

随机推荐