JQuery.Ajax()的data參數類型

2017年9月14日：補充JQuery.Ajax()的數據類型

 

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

除了這三種類型，還能夠是：

四、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);
	}
});

　　

五、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"這樣的就能夠了。