微信小程序 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模板实现方法
Apr 27 Javascript
javascript 日期常用的方法
Nov 11 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
js浏览器html5表单验证
Oct 17 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
python遍历数组的方法小结
2015/04/30 Python
python实现排序算法解析
2018/09/08 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python django生成迁移文件的实例
2019/08/31 Python
tensorflow的计算图总结
2020/01/12 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
高一英语教学反思
2014/01/22 职场文书
学校安全检查制度
2014/01/27 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
党员承诺书范文2015
2015/04/27 职场文书
初级职称评定工作总结
2015/08/13 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python