Detailed explanation and example code of WeChat applet POST request (network request)

WeChat applet POST request

Network requests are essential in the development of WeChat applet. GET.POST request is the most commonly used GET request. There are several pitfalls in POST request. I have filled them in for everyone.

<img src="http://img.blog.csdn.net/20161017170933243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" align="middle" alt="" />

According to the document, it must be written like this. Then you are in trouble.

1. 'Content-Type': 'application/json' can be used in get requests without any problem.

The POST request is not working. It needs to be changed to: "Content-Type": "application/x-www-form-urlencoded"

2016.11.10 update: Some students changed the content-type to lowercase and made a post request. Success.

2. Add method: "POST"

3.data: { cityname: "Shanghai", key: "1430ec127e097e1113259c5e1be1ba70" } If written in json format, the data cannot be requested. The format needs to be converted.

Post the code directly below:

3.1

<span style="font-size:24px;">//index.js
//获取应用实例
var app = getApp()
Page( {
 data: {
  toastHidden: true,
  city_name: &#39;&#39;,
 },
 onLoad: function() {
  that = this;
  wx.request( {
   url: "http://op.juhe.cn/onebox/weather/query",
   header: {
    "Content-Type": "application/x-www-form-urlencoded"
   },
   method: "POST",
   //data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" },
   data: Util.json2Form( { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }),
   complete: function( res ) {
    that.setData( {
     toastHidden: false,
     toastText: res.data.reason,
     city_name: res.data.result.data.realtime.city_name,
     date: res.data.result.data.realtime.date,
     info: res.data.result.data.realtime.weather.info,
    });
    if( res == null || res.data == null ) {
     console.error( &#39;网络请求失败&#39; );
     return;
    }
   }
  })
 },
 onToastChanged: function() {
  that.setData( { toastHidden: true });
 }
})
var that;
var Util = require( &#39;../../utils/util.js&#39; );</span>

3.2

<span style="font-size:24px;"><!--index.wxml-->
<view class="container">
  <toast hidden="{{toastHidden}}" bindchange="onToastChanged">
    {{toastText}}
  </toast>
  <view>{{city_name}}</view>
  <view>{{date}}</view>
  <view>{{info}}</view>
</view></span>

3.3

<span style="font-size:24px;">//util.js
function json2Form(json) {
  var str = [];
  for(var p in json){
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
  }
  return str.join("&");
}
module.exports = {
 json2Form:json2Form,
}</span>