1. 程式人生 > >node如何接收ajax post方式傳來的json型別資料

node如何接收ajax post方式傳來的json型別資料

最近學了node,對於post請求的資料都是用body-parser中介軟體進行處理,但是今天用ajax傳資料的時候發生了錯誤,錯誤如下:
這裡寫圖片描述

傳過來的值直接被解析成一個key,改了好久才解決,所以把這個問題記錄一下

1.form表單提交時

初入門node的同學(比如我),剛開始知道body-parser的時候都只知道這樣用
這裡寫圖片描述

然後接受post請求的資料通過req.body
這裡寫圖片描述

這樣傳過來的資料就會被解析成一個json資料賦值到req.body讓我們使用

前臺表單
這裡寫圖片描述

接收到的資料打印出來就是完美的json格式
這裡寫圖片描述

但是當通過ajax post傳過來的資料就會出現我所說的錯誤,資料被識別為一個key值
這裡寫圖片描述

這是因為body-parser的urlencoded方法顧名思義就是把傳來的資料當做url來處理,也就是像querystring一樣,所以對於傳過來的json資料,沒有識別到切割key和value的標誌,就把所有都當做key來處理

2.ajax提交json資料

對於ajax,我們一般都使用post方法來傳一個json資料,所以要把前後臺的模式都配置為json

body-parser除了urlencoded方法外,還有一個json方法
這裡寫圖片描述

這個配置就用來處理json格式的資料,body-parser可以配置多個選項,也就是說,我們為了讓body-parser既能處理正常的form表單,又能處理ajax的json資料,則需要把兩個都配置上
這裡寫圖片描述

順序沒有關係,body-parser會只會返回一個req.body,且會將傳過來的資料和設定進行匹配,選擇最適合的一個處理方式進行處理

用法還是一樣的,資料會儲存在req.body中
這裡寫圖片描述

所以為了讓body-parser能夠對我們傳過來的json資料首選bodyParser.json這種方法,我們在前臺傳資料的時候也要進行配置,將頭資訊設為application/json,如果你是用jquery的,只要設定頭資訊就可以,如果你自己寫的方法,記得傳資料時將json資料轉化為字串
這裡寫圖片描述

3.測試

我們已經配置好了後端的server,和前端的ajax方法,現在來測試一下

現在我想傳的資料像這樣,其中一個屬性值又是一個數組
這裡寫圖片描述

在ajax方法中寫入這個data(ajax呼叫方法視個人情況)
這裡寫圖片描述

然後觀察後臺打印出來的req.body,成功了!
這裡寫圖片描述