微信小程序 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 相关文章推荐
jQuery级联操作绑定事件实例
Sep 02 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
js 实现验证码输入框示例详解
Sep 23 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
使用Python实现一个简单的项目监控
2015/03/31 Python
初学Python函数的笔记整理
2015/04/07 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python操作toml文件的示例代码
2020/11/27 Python
行政文秘岗位职责范本
2014/02/10 职场文书
倡议书范文
2014/04/16 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
戒赌保证书
2015/05/11 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL