微信小程序 POST傳值跳坑

1.post請求

wx.request(OBJECT)
wx.request
發起的是 HTTPS 請求。一個微信小程序，同時只能有5個網絡請求連接。
官網上描述

參數名	類型	必填	說明
url	String	是	開發者服務器接口地址
data	Object、String	否	請求的參數
header	Object	否	設置請求的 header , header 中不能設置 Referer
method	String	否	默認為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success	Function	否	收到開發者服務成功返回的回調函數，res = {data: '開發者服務器返回的內容'}
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

微信小程序示例

wx.request({
  url: 'test.php', //僅為示例，並非真實的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) } }) 

這種請求GET方式是ok的，header頭也可以不用添加。
但是POST就有比較大的問題了。

我使用以下代碼進行調試（代碼一）：

wx.request({
    url: ApiHost + '/?service=default.getOrderInfo', data: { 'order_id': order_id }, method: 'POST', success: function (res) { // console.log(res); if (res.data.ret == 200) { //something to do } else{ //something to do } } fail: function (res) { console.log(res); } }); 

注意看下圖，微信開發工具里面的提示：

 

2016-12-21_111056.png

POST 請求會將data的值放在Request Payload里面，而不是Query String Parameters里面，后端服務器如果不注意，就無法取到數據。
網上很多改法，是這樣的。----加上header頭

wx.request({
    url: ApiHost + '/?service=default.getOrderInfo', data: { //數據urlencode方式編碼，變量間用&連接，再post 'order_id='+order_id }, method: 'POST', header：{ 'content-type':'application/x-www-form-urlencoded' }, success: function (res) { // console.log(res); if (res.data.ret == 200) { //something to do } else{ //something to do } } fail: function (res) { console.log(res); } }); 

這樣修改的話，后端可以不用特別處理。
但是............

因為還是想用標准的方法做，那只有修改后端服務器啦。
我這邊使用的是Phalapi框架，推薦下~~~

if(DI()->request->getHeader('content-type')) { $contentType = DI()->request->getHeader('content-type'); } if(!empty($contentType)&&(strtolower(@$contentType) === 'application/json')) { $HTTP_RAW_POST_DATA = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] : "{}"; DI()->request = new PhalApi_Request(array_merge($_GET,json_decode($HTTP_RAW_POST_DATA, true))); } 

終於，在pc上用代碼一調試通過。用上標准請求，也不用application/x-www-form-urlencoded這種模式。

不過.....用上真機調試，怎么又接收不到請求參數了。怪事。。。。。。。。。
最后通過抓包分析

真機端

POST /?service=default.getOrderInfo HTTP/1.0
Host: proxy
Connection: close
Content-Length: 43
Content-Type: application/json
Accept-Encoding: gzip, deflate
Accept: */*
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13G36 
MicroMessenger/6.5.1 NetType/WIFI Language/zh_CN
Referer: https://servicewechat.com/###/0/page-frame.html Accept-Language: zh-cn {"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"} 

pc模擬開發端

POST /?service=default.getOrderInfo HTTP/1.0
Host: proxy
Connection: close
Content-Length: 43
Origin: http://###.appservice.open.weixin.qq.com X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 appservice webview/100000 content-type: application/json Accept: */* Referer: https://servicewechat.com/####/devtools/page-frame.html Accept-Encoding: gzip, deflate, br {"order_id":"011T00wO0gZVR72P89tO0DFNvO0T00w0"} 

最后找到區別：
Content-Type 與 content-type
模擬器默認是content-type
真機默認是Content-Type
后端服務器增加處理Content-Type 就搞定了。

作者：tototo163
鏈接：https://www.jianshu.com/p/f95f64b393d1
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。