微信小程序 POST请求(网络请求)详解及实例代码


Posted in Javascript onNovember 16, 2016

微信小程序 POST请求

微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求,POST请求的时候有好几个坑.我已经为大家填好了.

<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="" />

按照文档,肯定是这么写.那就入坑了.

1. 'Content-Type': 'application/json'用在get请求中没问题.

POST请求就不好使了.需要改成: "Content-Type": "application/x-www-form-urlencoded"

2016.11.10更新:有同学在将content-type 修改为小写后,post请求成功.

2. 加上method: "POST"

3.data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }写成json格式这样也是请求不到数据的.需要转格式.

下面直接贴代码:

 3.1

<span style="font-size:24px;">//index.js 
//获取应用实例 
var app = getApp() 
Page( { 
 data: { 
  toastHidden: true, 
  city_name: '', 
 }, 
 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( '网络请求失败' ); 
     return; 
    } 
   } 
  }) 
 }, 
 onToastChanged: function() { 
  that.setData( { toastHidden: true }); 
 } 
}) 
var that; 
var Util = require( '../../utils/util.js' );</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>

微信小程序 POST请求(网络请求)详解及实例代码

希望对大家有帮助.

Javascript 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 #Javascript
input框中的name和id的区别
Nov 16 #Javascript
微信小程序 页面传参实例详解
Nov 16 #Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 #Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 #Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 #Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 #Javascript
You might like
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
jQuery live
2009/05/15 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
vue实现图书管理demo详解
2017/10/17 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python基础教程之异常详解
2019/01/10 Python
利用python计算时间差(返回天数)
2019/09/07 Python
如何基于python实现脚本加密
2019/12/28 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python轮询机制控制led实例
2020/05/03 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python IP地址转整数
2020/11/20 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
领导工作表现评语
2015/01/04 职场文书
鸟的天堂导游词
2015/01/31 职场文书
教师年终个人总结
2015/02/11 职场文书
小组组名及励志口号
2015/12/24 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript