小程序模板网

微信小程序学习点滴《五》:网络请求(POST请求)填坑指南

发布时间:2018-03-21 15:11 所属栏目:小程序开发教程
微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求
POST请求的时候有好几个坑.我已经为大家填好了.
按照文档,肯定是这么写.那就入坑了.
1. 'Content-Type': 'application/json'用在get请求中没问题.
POST请求就不好使了.需要改成: "Content-Type": "application/x-www-form-urlencoded"
 
2. 加上method: "POST"
3.data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }写成json格式这样也是请求不到数据的.需要转格式.
下面直接贴代码:
 3.1

	
  1. <span style="font-size:24px;">//index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page( {
  5. data: {
  6. toastHidden: true,
  7. city_name: '',
  8. },
  9. onLoad: function() {
  10. that = this;
  11. wx.request( {
  12. url: "http://op.juhe.cn/onebox/weather/query",
  13. header: {
  14. "Content-Type": "application/x-www-form-urlencoded"
  15. },
  16. method: "POST",
  17. //data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" },
  18. data: Util.json2Form( { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }),
  19. complete: function( res ) {
  20. that.setData( {
  21. toastHidden: false,
  22. toastText: res.data.reason,
  23. city_name: res.data.result.data.realtime.city_name,
  24. date: res.data.result.data.realtime.date,
  25. info: res.data.result.data.realtime.weather.info,
  26. });
  27. if( res == null || res.data == null ) {
  28. console.error( '网络请求失败' );
  29. return;
  30. }
  31. }
  32. })
  33. },
  34. onToastChanged: function() {
  35. that.setData( { toastHidden: true });
  36. }
  37. })
  38. var that;
  39. var Util = require( '../../utils/util.js' );</span>
  40.  
3.2

			
  1. <span style="font-size:24px;"><!--index.wxml-->
  2. <view class="container">
  3. <toast hidden="{{toastHidden}}" bindchange="onToastChanged">
  4. {{toastText}}
  5. </toast>
  6. <view>{{city_name}}</view>
  7. <view>{{date}}</view>
  8. <view>{{info}}</view>
  9. </view></span>
  10.  
 
3.3

	
  1. <span style="font-size:24px;">//util.js
  2. function json2Form(json) {
  3. var str = [];
  4. for(var p in json){
  5. str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
  6. }
  7. return str.join("&");
  8. }
  9. module.exports = {
  10. json2Form:json2Form,
  11. }</span>
  12.  


本文地址:https://www.eyoucms.com/wxmini/doc/course/22798.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询