小程序 — js页面发送请求并渲染数据到wxml页面

小程序—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、最主要的问题是前后端开发人员的沟通,及时有效的沟通是解决问题的最好方法,建议通过聊天软件准确的传达信息。

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值