小程序—js页面发送请求并渲染数据到wxml页面
1.发送数据请求
通过点击wxml页面搜索按钮,触发js页面search事件向后台发送请求,并通过data{}中的数据传递参数。
请求成功后通过this.setData{}接收并将返回来的参数传到储存数据的data{}中以供wxml页面渲染
search: function(e) {
var _this = this
wx.request({
url: 'http://192.168.10.xxx:xxxx/question/questions', //仅为示例,并非真实的接口地址
method: 'GET',
data: {
参数名:参数值 // 要传给后台的参数
},
header: {
"Content-Type": "application/json" // 默认值
},
success: function(res) { //请求成功
_this.setData({
参数名:参数值 // 后台返回来的参数值赋值给date中
})
fail: function(err) { //请求失败
wx.showToast({
title: '请求失败',
icon: 'fail',
duration: 2000
})
},
})
}
},
2.获取data请求后的数据并渲染到wxml页面
渲染数据时一般是数组或者对象,如果是键值对的方式可以以item.键名的方式显示。
<radio-group class="radio">
<radio wx:for="{{参数名}}" wx:key="item.num" checked="{{item.checked}}">
<text>{{item}}</text>
</radio>
</radio-group>
6.前后端交互总结
1、前后端交互其实很简单,只要字段名和数据类型一一对应上了,基本上没什么难点
2、最主要的问题是前后端开发人员的沟通,及时有效的沟通是解决问题的最好方法,建议通过聊天软件准确的传达信息。