Detailed explanation of Post request in WeChat applet development

韦小宝
Release: 2023-03-21 12:50:02
Original
14241 people have browsed it

This article talks about the Post request in the development of WeChat applet. If you don’t know about the Post request in the development of WeChat applet or are interested in the Post request in the development of WeChat applet, then Let’s take a look at this article together. Okay, without further ado, let’s get to the point!

1.post request


##wx.request(OBJECT)wx.request
Initiated is an HTTPS request.
A WeChat applet can only have 5 network request connections at the same time.
Official website description


##Parameter nameTypeRequiredDescriptionurlStringdataheadermethod
## is Developer server interface address
##Object, String No Requested parameters
Object No Set the request header, Referer cannot be set in the header
String No Default is GET, valid values: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT ##success
Function No Received the successful return from the developer serviceCallback function, res = {data: 'Content returned by the developer server' } fail
Function No Callback function for interface call failure complete
Function No The callback function at the end of the interface call (will be executed if the call is successful or failed)


WeChat Mini Program Example

##

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
        x: '' , 
        y: ''
   }, 
  header: { 
    'content-type': 'application/json' 
  }, 
  success: function(res) { 
    console.log(res.data) 
  }
})
Copy after login


This request GET method is OK, and the header does not need to be added.

But POST has a big problem.

I use the following code for debugging (

Code 1):

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);
    }
  });
Copy after login

Pay attention to the picture below, the prompts in the WeChat development tool:


POST request will put the value of data in the Request Payload instead of the Query String Parameters. If the backend server does not pay attention, it will not be able to get the data.
There are many reform laws on the Internet, which are like this. ----Add the 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);
    }
  });
Copy after login

If you modify it like this, the backend does not need special processing.

But...

Because I still want to use the standard method, the only way is to modify the backend server.

I am using the Phalapi framework here, I recommend it~~~

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)));
}
Copy after login

Finally, I passed the debugging using

code one on the PC. Use standard requests and do not use the application/x-www-form-urlencoded mode.

But...when I use a real machine for debugging, why can't I receive the

request parameters again? Strange things. . . . . . . . . Finally through packet capture analysis

##real machine end

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"}
Copy after login

pc simulation development end


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"}
Copy after login

Finally found the difference:

Content-Type and content-type
The emulator default is content- type
The default for real machines is Content-Type
The back-end server adds the processing of Content-Type and it is done.

The above is all the content of this article. If you don’t know much about it, you can easily master both sides by yourself!



Related recommendations: Detailed explanation of WeChat applet implementation of pull-down loading and pull-up refresh

WeChat applet implements finger zoom picture code sharing

PHP implements WeChat applet payment code sharing

The above is the detailed content of Detailed explanation of Post request in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template