微信小程序 POST傳值跳坑
阿新 • • 發佈:2018-02-08
hat webkit lob ron 代碼 target 服務 kit comment
2016-12-21_111056.png
作者:tototo163
鏈接:https://www.jianshu.com/p/f95f64b393d1
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
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
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
微信小程序 POST傳值跳坑