小程序售票---前台购票传输数据到后台生成票

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

  }
})