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

在微信小程序中，我们可以通过微信的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