前言
当很多没有后端基础的新手,遇到需要提交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:{
}
})
},
有兴趣一起学习的可以私聊,一起探讨进步