$.ajax 中的contentType型別

Null指標發表於2019-01-08
型別

前言

今天在搞專案的時候遇到一個問題，$.ajax 設定資料型別 applicaiton/json之後，伺服器端(express)就拿不到資料，遂解決後將問題以及問題原因整理下來。

正文

$.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的形式。

一般，不帶巢狀型別JSON：

data:{
  name:'zhangsan',
  age:'15' 
}
複製程式碼

如果是一些複雜一點的帶巢狀的JSON：

data:{
  data: {
    a: [{
      x: 2
    }]
  }
}
複製程式碼

application/x-www-form-urlencoded 是沒有辦法將複雜的 JSON 組織成鍵值對形式,你可以傳送請求，但是服務端收到資料為空， 因為 ajax 不知道怎樣處理這個資料。

解決方法:

發現 http 還可以自定義資料型別，於是就定義一種叫 application/json 的型別。這種型別是 text ， 我們 ajax 的複雜JSON資料，用 JSON.stringify序列化後，然後傳送，在伺服器端接到然後用 JSON.parse 進行還原就行了，這樣就能處理複雜的物件了。

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

總結

“application/json“的作用： 新增 contentType：“application/json“之後，向後臺傳送資料的格式必須為json字串

$.ajax({
    type: "post",
    url:  "",
    contentType: "application/json",
    data:"{'name':'zhangsan','age':'15'}",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(msg) {
        console.log(msg)
    }
})
複製程式碼

不新增 contentType：“application/json“的時候可以向後臺傳送json物件形式

$.ajax({
    type: "post",
    url:  "",
    data:{  
        name:'zhangsan',
        age:'15'
    },
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(msg) {
        console.log(msg)
    }
})
複製程式碼

另外，當向後臺傳遞複雜json的時候，同樣需要新增 contentType：“application/json“，然後將資料轉化為字串

var parm = {
    a: a,
    b: {
        c: c,
        d: d,
        e: e
    },
    f: f
}

$.ajax({  
    type: 'post',
    url: "",
    contentType: 'application/json',
    data: JSON.stringify(parm),
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(msg) {
        console.log(msg)
    }
})
複製程式碼

相關文章