欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-08 17:14:33
 微信小程序 post请求的实例详解 在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用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请求的实例详解

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