小程序售票---前台购票传输数据到后台生成票
1:页面结构
wxml代码: 用了form表单把要传输的数据 后台接受数据用 name来接受
<view class="container"> <template is="head" data="{{title: '售票测试'}}"/> <view class="page-body"> <form catchsubmit="formSubmit" catchreset="formReset"> <!-- <view class="page-section page-section-gap"> <view class="page-section-title">switch</view> <switch name="switch"/> </view> --> <view class="page-section page-section-gap"> <view class="page-section-title">radio</view> <radio-group name="radio" > <label><radio value="0" checked='true'/>单场票(限时)</label> <label><radio value="1"/>单场票(不限时)</label> </radio-group> </view> <view class="page-section page-section-gap"> <view class="page-section-title">slider</view> <slider value="1" name="slider" show-value min="1" max="5"></slider> </view> <input value='{{openid}}' name="openid" hidden='true'></input> <view class="btn-area"> <button type="primary" formType="submit">提交</button> <button formType="reset">重选</button> </view> </form> </view>
js代码:用 formSubmit来传递数据给后台 我的是springboot后台 如果未上传到服务器,url可以用 http://localhost:8080把数据传给后台
后台接收:
Page({
data: {
pickerHidden: true,
chosen: '',
openid:''
},
onLoad: function () {
this.getOpenid();
},
// 获取用户openid
getOpenid() {
let that = this;
wx.cloud.callFunction({
name: 'getOpenid',
complete: res => {
console.log('云函数获取到的openid: ', res.result.openId)
var openid = res.result.openId;
that.setData({
openid: openid
})
}
})
},
pickerConfirm: function (e) {
this.setData({
pickerHidden: true
})
this.setData({
chosen: e.detail.value
})
},
pickerCancel: function (e) {
this.setData({
pickerHidden: true
})
},
pickerShow: function (e) {
this.setData({
pickerHidden: false
})
},
formSubmit: function (e) {
var formData = e.detail.value;
wx.request({
url: 'http://xxxx',
data: formData,
success: function (res) {
console.log(res.data),
wx.navigateTo({
url: '../mytickets/mytickets?code='+res.data+' '
})
}
})
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
formReset: function (e) {
console.log('form发生了reset事件,携带数据为:', e.detail.value)
this.setData({
chosen: ''
})
},
qrcode: function (e) {
wx.navigateTo({
url: '../../qrcode/qrcode'
})
}
})