微信小程序 POST请求的实例详解


Posted in Javascript onSeptember 29, 2017

 微信小程序 POST请求的实例详解

在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo。

页面代码:

<view> {{title}} </view>

<span style="font-size:24px;"><!--index.wxml--> 
<view class="container"> 
  <view style="color:{{red}}">{{city_name}}</view> 
  <view>{{date}}</view> 
  <view>{{info}}</view> 
</view></span>

js代码:

var app = getApp();
var that; 
var Util = require( '../../utils/util.js' );
Page( { 
 data: {  
  city_name: '', 
  title:'',
  red:'green'
 }, 
 onLoad: function(options) { 
   this.setData({
     title:options.title
   })
  that = this; 
  wx.request( { 
   url: "http://op.juhe.cn/onebox/weather/query", 
   header: { 
   //请求头和ajax写法一样
    "Content-Type": "application/x-www-form-urlencoded" 
   }, 
   method: "POST",  
   data: Util.json2Form( { cityname: "北京", key: "1430ec127e097e1113259c5e1be1ba70" }), 
   complete: function( res ) { 

     wx.showToast({
      title:'成功',
      icon:'success',
      duration:2000
     })

    that.setData( {  
      red:'red',
     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; 
    } 

     setTimeout(function(){
       wx.hideToast()
     },2000)
   } 
  }) 
 }

})

依赖util.js代码:

function json2Form(json) { 
  var str = []; 
  for(var p in json){ 
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p])); 
  } 
  return str.join("&"); 
} 

module.exports = {
 formatTime: formatTime,
 json2Form:json2Form,
}

展示图:

微信小程序 POST请求的实例详解

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
微信小程序之数据缓存的实例详解
Sep 29 #Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 #Javascript
微信小程序中setInterval的使用方法
Sep 29 #Javascript
vue生成随机验证码的示例代码
Sep 29 #Javascript
JS设计模式之单例模式(一)
Sep 29 #Javascript
微信小程序的日期选择器的实例详解
Sep 29 #Javascript
JS设计模式之惰性模式(二)
Sep 29 #Javascript
You might like
制作美丽的拉花
2021/03/03 冲泡冲煮
杏林同学录(九)
2006/10/09 PHP
基于mysql的论坛(5)
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python实现统计代码行的方法分析
2017/07/12 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python实现图像的垂直投影示例
2020/01/17 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
介绍一下write命令
2014/08/10 面试题
英文自我鉴定
2013/12/10 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
优秀党员获奖感言
2014/02/18 职场文书
求职自我评价范文100字
2014/09/23 职场文书
会议通知
2015/04/15 职场文书
九年级化学教学反思
2016/02/22 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
java版 联机五子棋游戏
2022/05/04 Java/Android
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技