1. 程式人生 > >小程式售票---前臺購票傳輸資料到後臺生成票

小程式售票---前臺購票傳輸資料到後臺生成票

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' }) } })