脚本宝典收集整理的这篇文章主要介绍了js實例教程-JQuery.Ajax()的data參數類型實例介紹，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。

JQuery.Ajax()的數據類型

本文以前提到的三種類型，這三種參數本質上都是變成了類似“uname=alice&mobileIpt=110&birthday=1983-05-12“”這樣的字符串。

除了這三種類型，還可以是：

4、JSON字符串，形如 

 {"name": "uname", "age": 18}

注意，這個地方不是json對象，是json字符串，字符串。這樣，在後台就可以直接注入到對象中。

當你需要向後台提交一組對象時時，json字符串的好處就體現出來了（對象數組）。

一般都是用post方法傳遞參數。

寫法：

$.ajax({

    type: 'post',

    url: 'aaa/bbb.do',

    contentType: 'application/json;charset=utf-8',

    data: '{"name": "uname", "age": 18}',

    success: function (data) { //返回json結果

        alert(data);

    }

});

　　

5、FormData對象，它可以更靈活方便的發送表單數據，因為可以獨立於表單使用。

最大的好處是可以通過Ajax上傳文件。通過這種方式，可以非常方便的進行表單提交，也不需要下文提到的那種方法了，直接表單轉換成FormData對象即可。

var fd = new FormData(document.querySelector("form"));

fd.append("CustomField", "This is some extra data");

$.ajax({

  url: "stash.php",

  type: "POST",

  data: fd,

  processData: false,  // 不處理數據

  contentType: false   // 不設置內容類型

});

可以參考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

6.其他類型，比如html, 比如XML，只要設置要contentType即可，類似JSON類型

 —————————————————分割線—————————————————————————————

假如現在有這樣一個表單，是添加元素用的。

<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方法（現在請使用FormData）

序列化表格元素 (類似 '.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"這樣的就可以了。

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-JQuery.Ajax()的data參數類型實例介紹全部内容，希望文章能够帮你解决js實例教程-JQuery.Ajax()的data參數類型實例介紹所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。