1. 程式人生 > >微信小程序 POST傳值跳坑

微信小程序 POST傳值跳坑

hat webkit lob ron 代碼 target 服務 kit comment

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傳值跳坑