from表单提交与云开发

前言

当很多没有后端基础的新手，遇到需要提交from表单数据的时候往往会很迷， 云开发的出现对于比较小的数据的交互就表现出了很大的优势

。

---

提示：以下是本篇文章正文内容，下面案例可供参考

wxml页面

<view class="content">
<form bindsubmit="formbind">
  <text>性别</text>
  <radio-group bindchange="radio">
    <label wx:for="{{sex}}" wx:for-item="sex">
    <radio value="{{sex.value}}"/>
  {{sex.value}}
    </label>
  </radio-group>
  <view>
    <text>姓名</text>
    <input class="input" type="text" placeholder="请输入姓名" bindinput="namebind"/>
  </view>
  <text>想去的国家</text>
  <checkbox-group bindchange="check">
    <label wx:for="{{duoxuan}}">
      <checkbox value="{{item.value}}"/>
      {{item.value}}
    </label>
  </checkbox-group>
  <button form-type="submit" type="primary">提交</button>
</form>
</view>

js页面

data: {
    sex:[
      {value:'男'},
      {value:'女'}
    ],
    duoxuan:[
      {value:'中国'},
      {value:'美国'},
      {value:'法国'},
      {value:'英国'}
    ],
      radio:'',
      guojia:'',
      name:''
     
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  radio:function(e){
    console.log(e.detail.value)
    this.setData({
      radio:e.detail.value
    })
  },
  check:function(e){
    console.log(e.detail.value)
    this.setData({
      guojia:e.detail.value
    })
  },
  namebind:function(e){
    console.log(e.detail.value)
    this.setData({
      name:e.detail.value
    })
  },
 

  formbind:function(){
    console.log("提交成功")
    //数据库代建
    const db = wx.cloud.database()
    const text = db.collection('text') //云数据库的集合名text
    text.add({
      data:{
        radio:this.data.radio,
        guojia:this.data.guojia,
        name:this.data.name
        
      }
    })
  },

总结
提示：这里对文章进行总结：
很简单的一段代码 复制粘贴就能运行
只需要给form表格标签bindsubmit添加一下云数据库formbind:function(){
console.log(“提交成功”)
//数据库代建
const db = wx.cloud.database()
const text = db.collection(‘text’) //云数据库的集合名text
text.add({
data:{
}
})
},

有兴趣一起学习的可以私聊，一起探讨进步