微信小程序API——向服务器发送请求

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cwh1010714845/article/details/78822442

在微信小程序中,我们可以通过微信的API与服务器进行数据传递,接下来我会详细介绍一下wx.request的用法。

首先给出前端代码,我们定义一个按钮,绑定点击事件,用于给服务器发送请求。当服务器返回数据后,通过wx:for循环出数组中的数据。

<button type="primary" bindtap='sendRequest'> 发送http请求 </button>

<!-- 通过wx:for循环遍历list数组 -->
<view wx:for="{{list}}" wx:key="key">
name:{{item.name}}
id:{{item.Id}}
</view>

接下来看一下后来js的请求逻辑。

var SERVER_PATH ="http://服务器IP/处理该请求的文件";//定义服务器地址
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],//list数组用于接受服务器穿回来的json数组
  },
  sendRequest : function(){
    var that=this;//获取到全局变量

    wx.request({
      url: SERVER_PATH,//给函数传递服务器地址参数 
      data: {
        x: '',
        y: ''
      },//给服务器传递数据,本次请求不需要数据,可以不填
      header: {
        'content-type': 'application/json' // 默认值,返回的数据设置为json数组格式
      },
      success: function (res) {
        console.log(res);//打印出返回的数据
        var data=res.data;
        that.setData({
          list: data
        })//通过setData方法把返回的数据复制给本页面定义的list数组
      },
    })
  },
})

大家可能心中还会有一些疑问,接下来我们来看一看json数组中的内容。
这里写图片描述

json数组中有两个元素,索引分别为0和1,我们通过wx:for把这两个元素遍历出来。每一个元素中包含两个属性,我们把list数组丢给for循环,然后标签内的{{item}}则代表每一个元素,{{item.name}}则代表name属性,就这样,我们就可以把json数组中的每一个值都遍历出来,是不是很方便。

官方文档地址https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject

没有更多推荐了,返回首页