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

 微信小程序 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请求  # POST请求的详解  # 小程序  # POST  # 微信小程序设置http请求的步骤详解  # 微信小程序之GET请求的实例详解  # 微信小程序 同步请求授权的详解  # 微信小程序 网络请求(GET请求)详解  # 微信小程序 网络请求（post请求  # get请求）  # 微信小程序 http请求封装详解及实例代码  # 微信小程序HTTP接口请求封装代码实例  # 微信小程序网络请求封装示例  # 微信小程序请求前置的方法详解  # 有一  # 如有  # 希望能  # 做一个  # 谢谢大家  # 北京  # 疑问请  # var  # app  # require  # Util  # getApp  # red  # color  # city_name  # info  # date  # options  # function  # setData 

相关文章： 免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  如何通过二级域名建站提升品牌影响力？  PHP 500报错的快速解决方法  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  平台云上自助建站如何快速打造专业网站？  C++如何编写函数模板？（泛型编程入门）  实现点击下箭头变上箭头来回切换的两种方法【推荐】  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  如何快速生成橙子建站落地页链接？  已有域名如何快速搭建专属网站？  制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  再谈Python中的字符串与字符编码（推荐）  建站之星如何实现五合一智能建站与营销推广？  宁波自助建站系统如何快速打造专业企业网站？  如何配置FTP站点权限与安全设置？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  5种Android数据存储方式汇总  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  济南专业网站制作公司,济南信息工程学校怎么样？  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  建设网站制作价格,怎样建立自己的公司网站？  建站之星CMS五站合一模板配置与SEO优化指南  制作销售网站教学视频,销售网站有哪些？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  建站之星如何配置系统实现高效建站？  PHP正则匹配日期和时间(时间戳转换)的实例代码  如何在万网ECS上快速搭建专属网站？  Swift开发中switch语句值绑定模式  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  如何选择最佳自助建站系统？快速指南解析优劣  香港服务器租用每月最低只需15元？  如何在万网主机上快速搭建网站？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  高防服务器：AI智能防御DDoS攻击与数据安全保障  高防服务器租用首荐平台，企业级优惠套餐快速部署  定制建站流程步骤详解：一站式方案设计与开发指南  建站之星安装步骤有哪些常见问题？  如何在自有机房高效搭建专业网站？  已有域名和空间如何快速搭建网站？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  定制建站策划方案_专业建站与网站建设方案一站式指南  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  建站10G流量真的够用吗？如何应对访问高峰？  建站之星如何保障用户数据免受黑客入侵？