微信小程序如何提交表单数据到数据库

1、先在wxml里面写一个表单，在form里面添加bindsubmit的属性，下面再添加两个button，在button里面添加属性form-type，form-type有两种取值：submit、reset

<form bindsubmit="btnSub"><input name="title" placeholder="请输入标题"></input><input name="author" placeholder="请输入作者"></input><textarea name="content" placeholder="请输入内容"></textarea><button type="primary" form-type="submit">提交</button><button type="default" form-type="reset">重置</button>
</form>

2、在wxss里面对表单进行简单的渲染

input{ border: 1px solid grey;}
textarea{ border: 1px solid grey;}

3、在js中写方法，使用db.collection(“datalist”).add({ })向云数据库中添加数据

  btnSub(res){wx.showLoading({title: '数据提交中......',})var {title,author,content}=res.detail.value;//var resVlu=res.detail.valueconsole.log(title,author,content)db.collection("demolist").add({data:{title:title,authot:author,content:content} }).then(res=>{console.log(res)wx.hideLoading({success: (res) => {},})})}

注：
这里使用到了ES6中的解构函数来获取表单的数据，再添加到云数据库中。
var{title,author,content}=res.detail.value;

如不使用解构函数则可以一个一个值获取：
var title=res.detail.value.title;
var author=res.detail.value.author;
var content=res.detail.value.content;

另外这里还有一种方法，将res.detail.value返回的结果作为对象直接传入data：

var resVlu=res.detail.value
db.collection(“datalist”).add({
data:resVlu
}).then(res=>{
console.log(res)
})

微信小程序项目实战：如何提交表单数据到云数据库相关推荐

视频教程-微信小程序项目实战之我画你猜视频课程-微信开发
微信小程序项目实战之我画你猜视频课程精通PHP软件开发和WEB前端开发技术,熟悉PHP.Java.Javascript.HTML等语言,熟悉HTTP协议及W3C相关互联网规范,曾在山西某知名公司担任 ...
微信小程序项目实战之天气预报
概述微信小程序项目实战之天气预报详细代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
微信小程序项目实战之豆瓣天气
概述微信小程序项目实战之豆瓣天气详细代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
微信小程序项目实战：快递查询-李宁-专题视频课程
微信小程序项目实战:快递查询-1303人已学习课程介绍本课程主要介绍了scrollview布局,以及如何通过第三方API获取并处理数据. 课程收益本课程主要介绍了如何实现 ...
微信小程序项目实战：电影购票系统-李宁-专题视频课程
微信小程序项目实战:电影购票系统-1644人已学习课程介绍本课程主要介绍了scrollview布局,导航.从服务端获取数据,以及处理数据的方法. 课程收益本课程的目标是让 ...
手把手带你学习微信小程序 —— 项目实战篇
微信小程序项目实战篇 WeChat-applet 1.支付宝界面展示 2.微博发帖功能实现 3.时间格式化案例 4.微信红包界面展示 5.微信消息删除案例 6.微信icon 组件 6.1 支付成功界面 ...
视频教程-微信小程序项目实战：电影购票系统-微信开发
微信小程序项目实战:电影购票系统东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过100 ...
视频教程-微信小程序项目实战：高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
12_心理咨询_微信小程序项目实战_数据交互_深入理解小程序
前言我们实现静态页面,只需要稍微懂一点HTML/CSS即可或者零基础都可以,但是如果想要进行数据交互,需要对小程序有一定的理解: 小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开 ...

微信小程序项目实战：如何提交表单数据到云数据库

微信小程序如何提交表单数据到数据库

微信小程序项目实战：如何提交表单数据到云数据库相关推荐

最新文章

热门文章