$.ajax 中的contentType

$.ajax 中的contentType

在 cnodejs.org 論壇中有一個問題,讓我也很奇怪,說是 $.ajax 設置數據類型 applicaiton/json以後,服務器端(express)就拿不到數據,好奇之下,就去翻了翻資料,發現了一個本身也沒有注意到的事。node

因而有了這篇文章。jquery

正文

$.ajax contentType 和 dataType , contentType 主要設置你發送給服務器的格式,dataType設置你收到服務器數據的格式。程序員

在http 請求中,get 和 post 是最經常使用的。在 jquery 的 ajax 中, contentType都是默認的值:application/x-www-form-urlencoded,這種格式的特色就是,name/value 成爲一組,每組之間用 & 聯接,而 name與value 則是使用 = 鏈接。如: wwwh.baidu.com/q?key=fdsa&lang=zh 這是get , 而 post 請求則是使用請求體,參數不在 url 中,在請求體中的參數表現形式也是: key=fdsa&lang=zh的形式。ajax

鍵值對這樣組織在通常的狀況下是沒有什麼問題的,這裏說的通常是,不帶嵌套類型JSON,也就是 簡單的JSON,形如這樣:express

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

可是在一些複雜的狀況下就有問題了。 例如在 ajax 中你要傳一個複雜的 json 對像,也就說是對象嵌數組,數組中包括對象,兄果你這樣傳:json

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

這個複雜對象, application/x-www-form-urlencoded 這種形式是沒有辦法將複雜的 JSON 組織成鍵值對形式(固然也有方案這點能夠參考 ) ,你傳進去能夠發送請求,可是服務端收到數據爲空, 由於 ajax 沒有辦法知道怎樣處理這個數據。api

這怎麼能夠呢?數組

聰明的程序員發現 http 還能夠自定義數據類型,因而就定義一種叫 application/json 的類型。這種類型是 text , 咱們 ajax 的複雜JSON數據,用 JSON.stringify序列化後,而後發送,在服務器端接到而後用 JSON.parse 進行還原就好了,這樣就能處理複雜的對象了。服務器

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

這樣你就能夠發送複雜JSON的對象了。像如今的 restclient 都是這樣處理的。app

參考文章

  1. jquery ajax 文檔,告訴你可使用默認的 application/x-www-form-urlencoded, multipart/form-data, or text/plain 這三種,其它的也能夠,可是須要告訴ajax 的怎樣序列化它。
  2. datetype 和 contenttype 的區別,這篇文章告訴你,datetype 和 contentType 的區別。
  3. jquery ajax 發送 JSON,這篇文章告訴你如何使用 contentType
  4. application-x-www-form-urlencoded,這篇文章告訴你如何 application-x-www-form-urlencoded 的區別
    5.post數據,這篇文章講 post 數據形式
相關文章
相關標籤/搜索