小程式售票---前臺購票傳輸資料到後臺生成票
阿新 • • 發佈:2018-11-07
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' }) } })