$.ajax 中的contentType

在 cnodejs.org 論壇中有一個(gè)問(wèn)題，讓我也很奇怪，說(shuō)是 $.ajax 設(shè)置數(shù)據(jù)類(lèi)型 applicaiton/json之后，服務(wù)器端(express)就拿不到數(shù)據(jù)，好奇之下，就去翻了翻資料，發(fā)現(xiàn)了一個(gè)自己也沒(méi)有注意到的事。

于是有了這篇文章。

正文

$.ajax contentType 和 dataType , contentType 主要設(shè)置你發(fā)送給服務(wù)器的格式，dataType設(shè)置你收到服務(wù)器數(shù)據(jù)的格式。

在http 請(qǐng)求中，get 和 post 是最常用的。

在 jquery 的 ajax 中， contentType都是默認(rèn)的值：application/x-www-form-urlencoded，這種格式的特點(diǎn)就是，name/value 成為一組，每組之間用 & 聯(lián)接，而 name與value 則是使用 = 連接。

如： wwwh.baidu.com/q?key=fdsa&lang=zh 這是get , 而 post 請(qǐng)求則是使用請(qǐng)求體，參數(shù)不在 url 中，在請(qǐng)求體中的參數(shù)表現(xiàn)形式也是: key=fdsa&lang=zh的形式。

鍵值對(duì)這樣組織在一般的情況下是沒(méi)有什么問(wèn)題的，這里說(shuō)的一般是，不帶嵌套類(lèi)型JSON，也就是 簡(jiǎn)單的JSON，形如這樣：

{
    a: 1,
    b: 2,
    c: 3
}

但是在一些復(fù)雜的情況下就有問(wèn)題了。

例如在 ajax 中你要傳一個(gè)復(fù)雜的 json 對(duì)像，也就說(shuō)是對(duì)象嵌數(shù)組，數(shù)組中包括對(duì)象，兄果你這樣傳：

{
  data: {
    a: [{
      x: 2
    }]
  }
}

這個(gè)復(fù)雜對(duì)象， application/x-www-form-urlencoded 這種形式是沒(méi)有辦法將復(fù)雜的 JSON 組織成鍵值對(duì)形式(當(dāng)然也有方案這點(diǎn)可以參考 ) ,你傳進(jìn)去可以發(fā)送請(qǐng)求，但是服務(wù)端收到數(shù)據(jù)為空， 因?yàn)?ajax 沒(méi)有辦法知道怎樣處理這個(gè)數(shù)據(jù)。

這怎么可以呢？

聰明的程序員發(fā)現(xiàn) http 還可以自定義數(shù)據(jù)類(lèi)型，于是就定義一種叫 application/json 的類(lèi)型。

這種類(lèi)型是 text ， 我們 ajax 的復(fù)雜JSON數(shù)據(jù)，用 JSON.stringify序列化后，然后發(fā)送，在服務(wù)器端接到然后用 JSON.parse 進(jìn)行還原就行了，這樣就能處理復(fù)雜的對(duì)象了。

$.ajax({
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({a: [{b:1, a:1}]})
})

這樣你就可以發(fā)送復(fù)雜JSON的對(duì)象了。像現(xiàn)在的 restclient 都是這樣處理的。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論