微信小程序如何将表单的数据发送到数据库，云开发，并实现将数据渲染到页面中(微信小程序如何删除)

微信小程序如何将表单的数据发送到数据库，云开发，并实现将数据渲染到页面中 一、表单数据发送到数据库1. 利用bindsubmit来写一个函数<form bindsubmit="bindSubmit"> <view class="form_border"> <label>收件人名称:</label> <input name="userName" auto-focus placeholder=" 请填写收件人" /> </view> <view class="form_border"> <label>在哪里取件:</label> <input name="getAdress" placeholder=" 请填写取件地址" /> </view> <view class="form_border"> <label>送到哪里去:</label> <input name="putAdress" placeholder=" 请填写送货地址" /> </view> <view class="form_border"> <label>送达时间:</label> <input name="getTime" placeholder=" 请填写送达时间" /> </view> <view class="form_border"> <label>取件码:</label> <input name="getNumber" placeholder=" 请填写取件码" /> </view> <view class="form_border"> <label>联系电话:</label> <input name="userNumber" placeholder=" 请填写联系电话" /> </view> <view class="form_border"> <label>酬劳费用:</label> <input name="getPrice" placeholder=" 请填写酬劳费用" /> </view> <button hover-class="hover-button" class="button" form-type="submit">提交订单</button> <button hover-class="hover-button" class="button" form-type="reset" style="margin-top: 10rpx;">重置订单</button></form>2. 给每一个变量一个name值，用于传值

推荐整理分享微信小程序如何将表单的数据发送到数据库，云开发，并实现将数据渲染到页面中(微信小程序如何删除)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:微信小程序如何退出登录,微信小程序如何清除数据,微信小程序如何删除,微信小程序如何删除,微信小程序如何申请,微信小程序如何申请,微信小程序如何开店,微信小程序如何批量删除,内容如对您有帮助，希望把文章链接给更多的朋友！

如上图

3. 添加两个按钮用于提交表单和重置表单 <button hover-class="hover-button" class="button" form-type="submit">提交订单</button> <button hover-class="hover-button" class="button" form-type="reset" style="margin-top: 10rpx;">重置订单</button>

 form-type的不同属性实现不同的作用。

4. 下面是wxss的样式，不做解释view{ height: 100rpx; margin-top: 20rpx;}input{ width: 750rpx; height: 60rpx; display: block; box-sizing: border-box}label{ display: inline-flex; width: 300rpx; height: 50rpx; margin-bottom: 20rpx;}.form_border{ margin: 20rpx,20rpx,20rpx,20rpx; padding-bottom: 20rpx; border-bottom: solid #b3aeae; display:inline-flexbox;}input{ font-size: 35rpx; font-family: Verdana, Geneva, Tahoma, sans-serif; padding-bottom: 20rpx;}.button{ align-items: center; text-align: center; color: #FFFFFF; border-radius: 25rpx; padding: 10rpx; margin-top: 80rpx; margin-bottom: 0rpx; width:50%; height: 100rpx; /* z-index:666; */ bottom:15rpx; display: -webkit-flex; justify-content:center; background-color: #259dff;}.hover-button{ position: relative; top: 3rpx; left: 3rpx; box-shadow:0px 0px 8px rgba(0, 0, 0, 0.1) inset; background: rgb(195, 219, 182);} 5. js部分的函数实现 data: { "userName":"", "getAdress":"", "putAdress":"", "getTime":"", "getNumber":"", "userNumber":"", "getPrice":"" }, bindSubmit:function(res){ console.log(res) var userName = res.detail.value.userName var getAdress = res.detail.value.getAdress var putAdress = res.detail.value.putAdress var getTime = res.detail.value.getTime var getNumber = res.detail.value.getNumber var userNumber = res.detail.value.userNumber var getPrice = res.detail.value.getPrice userNumber = Number(userNumber) getNumber = Number(getNumber) getPrice = Number(getPrice) wx.showLoading({ title: '订单发布中...', mask: "true" }) db.collection("put_list").add({ data: { "userName":userName, "getAdress":getAdress, "putAdress":putAdress, "getTime":getTime, "getNumber":getNumber, "userNumber":userNumber, "getPrice":getPrice }, success: function(res){ console.log(res) wx.hideLoading() } }) },6. 效果展示

二、表单数据库发送到数据库之后，将数据渲染到页面上 1. 用小程序中的接口函数来实现const db = wx.cloud.database()//全局变量放在page外面onLoad:function(options) { db.collection('put_list').get({ success: res=>{ console.log('请求成功',res)//res.data包含该记录的数据 this.setData({ List: res.data }) }, fail(err){ console.log('请求失败',err) } }) },

db.collection(这里面是数据库中集合的名字).

我最大的疑问是：我在这一步：success:function(res){}这样写错了，页面一直不显示，明明显示请求成功，唉！改成：success:res=>就成功了

2. 要有一个空数组来存数据data: { List: [] },3. 最后在wxml中渲染，调用数组，来显示数据

因为把数据库中的数据存在了空数组中，然后调用数组就可以显示出数据库中的数据

<block wx:for="{{List}}"><!-- 上面 --><view class="container0"><view class="left">*用户名： {{item.userName}}</view><view class="right">取件码： {{item.getNumber}}</view></view><!-- 中间 --><view class="container2"> <view>取件地址：{{item.getAdress}}</view> <view>送货地址：{{item.putAdress}}</view> <view>送达时间：{{item.getTime}}</view></view><!-- 下面 --><view class="container1"> <view class="left">联系电话：{{item.userNumber}}</view> <view class="right">酬劳：{{item.getPrice}}元</view></view></block>4. 效果展示