在進(jìn)行前端開(kāi)發(fā)時(shí)，我們常常使用$.ajax來(lái)進(jìn)行數(shù)據(jù)傳輸。但有時(shí)我們發(fā)現(xiàn)，傳到后臺(tái)的數(shù)據(jù)并不是我們想要的json格式，導(dǎo)致后端無(wú)法解析。下面我們來(lái)分析一下這個(gè)問(wèn)題。

$.ajax({
type: "POST",
url: "/api/getData",
data: {
name: "Tom",
age: 18
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (err) {
console.log(err);
}
});

在這段代碼中，我們使用了$.ajax向后臺(tái)發(fā)送POST請(qǐng)求，請(qǐng)求的數(shù)據(jù)為{name: "Tom", age: 18}，dataType為json。但是可能你會(huì)發(fā)現(xiàn)，在后臺(tái)接收到的數(shù)據(jù)并不是我們期望的json格式，而是通過(guò)key-value形式拼接的字符串，如下所示：

"name=Tom&age=18"

這是因?yàn)樵?.ajax中，如果data是一個(gè)普通的javascript對(duì)象，那么它默認(rèn)會(huì)以application/x-www-form-urlencoded格式來(lái)序列化數(shù)據(jù)，并在請(qǐng)求頭中添加Content-Type:application/x-www-form-urlencoded;charset=UTF-8。

那么如何解決這個(gè)問(wèn)題呢？有兩種方式：

一種是將data轉(zhuǎn)化為json字符串傳輸：

$.ajax({
type: "POST",
url: "/api/getData",
data: JSON.stringify({
name: "Tom",
age: 18
}),
dataType: "json",
contentType: "application/json",
success: function (data) {
console.log(data);
},
error: function (err) {
console.log(err);
}
});

在這段代碼中，我們使用了JSON.stringify將data對(duì)象轉(zhuǎn)化為json字符串傳輸，并在請(qǐng)求頭中添加Content-Type:application/json;charset=UTF-8。

另一種是在后臺(tái)對(duì)Content-Type進(jìn)行處理，將其設(shè)置為application/json，如下所示：

router.post('/api/getData', function (req, res) {
res.setHeader('Content-Type', 'application/json');
console.log(req.body);
res.end(JSON.stringify({}));
});

在這段代碼中，我們?cè)诤笈_(tái)將Content-Type設(shè)置為application/json，然后就能夠正確地解析json數(shù)據(jù)了。