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