本案例打开页面Onload函数自动获取数据库中的域和ID数据,然后再根据选择的数据去发送一个请求request。本实例中最核心的点就是我怎么才能把我选中的数据放到request请求中,而且我选的数据是动态的,我选的是什么就提交什么过去。其实这个意思也是很清晰的,我们只要把我们要提交的数据放到wx.request函数中的data中,这就是我们请求时携带的数据(doorfiledno和controllersn),下面是效果图。
表单页面index.wxml
<view class="container">
<view class="page-body">
<view class="page-section">
<view class="weui-cells__title">设备区域</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">当前选择</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindDoornoChange" name="doorfieldno" value="{{Doornos[index2]}}" range="{{Doornos}}">
<view class="weui-input">{{Doornos[index2]}}</view>
</picker>
</view>
</view>
</view>
<view class="weui-cells__title">设备ID</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">当前选择</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindPickerChange" name="controllersn" value="{{Controllers[index]}}" range="{{Controllers}}">
<view class="weui-input">{{Controllers[index]}}</view>
</picker>
</view>
</view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>正在连接门禁...</text>
</view>
<view class="page-section-spacing">
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item"><image src="../../image/door.jpg" style="width:56px;height:100px;margin-top:26px;margin-left:8px;"></image></view>
<view class="flex-item"><image src="../../image/door.jpg" style="width:56px;height:100px;margin-top:26px;margin-left:8px;"></image></view>
<view class="flex-item"><image src="../../image/door.jpg" style="width:56px;height:100px;margin-top:26px;margin-left:8px;"></image></view>
<view class="flex-item"><image src="../../image/door.jpg" style="width:56px;height:100px;margin-top:26px;margin-left:8px;"></image></view>
</view>
</view>
</view>
<view class="btn-area">
<button bindtap="makeRequest" type="primary" disabled="{{buttonDisabled}}" loading="{{loading}}">开门</button>
</view>
</view>
</view>
js代码index.js
const requestUrl = require('../../config').opendoorUrl const duration = 2000 Page({ data: { // text:"这是一个页面" array: ["中国", "美国", "巴西", "日本"], toast1Hidden: true, modalHidden: true, modalHidden2: true, notice_str: '', index: 0, index2: 0 }, makeRequest: function () { var self = this self.setData({ loading: true }) wx.request({ // url: requestUrl, url: 'https://www.100txy.com/Home/door/nowopendoor', data: { noncestr: Date.now(), doorfieldno: self.data.Doornos[self.data.index2], controllersn: self.data.Controllers[self.data.index] }, success: function (result) { wx.showToast({ title: '开门成功', icon: 'success', mask: true, duration: duration }) self.setData({ loading: false }) console.log('request success', result) }, fail: function ({ errMsg }) { console.log('request fail', errMsg) self.setData({ loading: false }) } }) }, bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindDoornoChange: function (e) { console.log('doorno发送选择改变,携带值为', e.detail.value) this.setData({ index2: e.detail.value }) }, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 console.log('onLoad') var that = this wx.request({ url: 'https://www.100txy.com/Home/door/getallcontroller', //仅为示例,并非真实的接口地址 data: {}, header: { 'content-type': 'application/json' }, success: function (res) { console.log(res.data) that.setData({ Doornos: res.data.a, Controllers: res.data.b }) } }) } })
样式文件index.wxss
.flex-wrp{
margin-top: 60rpx;
display:flex;
}
.flex-item{
width: 200rpx;
height: 300rpx;
font-size: 26rpx;
}
.flex-item-V{
margin: 0 auto;
width: 300rpx;
height: 200rpx;
}
.section__title{
float: left;
width:30%;
}
.form-group{
float: right;
width: 70%;
}
.section{
clear: both;
width:90%;
margin: 2rem auto;
}
.input-text{
border: 1px solid #ddd;
}
.button{
border: 1px solid #1aad19;
border-radius: 2px;
}
@import "../common/lib/weui.wxss";
.picker{
padding: 19rpx 26rpx;
background-color: #FFFFFF;
}
服务端接收数据
<?php
var_dump($_REQUEST);