本案例打开页面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);