微信小程序form表单提交到数据库 | 您所在的位置:网站首页 › form表单怎么提交到数据库 › 微信小程序form表单提交到数据库 |
1.小程序目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html2.Wxml文件代码 姓名 性别 男 女 爱好 旅游 看书 电动 篮球 提交 重置 ******重点 A.Form表单,需要绑定一个submit事件,在小程序中,属性为bindsubmit, bindsubmit=”formSubmit” 这里的属性值formSubmit,命名可以为符合规范的任意值,相当于以前html中的 οnsubmit=”formSubmit()”,是一个函数名,当提交的时候触发formSubmit这个函数事件,这个函数写在js中。 B.其他的属性和之前的HTML差不多,注意的是,表单一定要有name=“value”,后端处理和以前一样,比如name=”username” PHP可以用 $_POST[‘username']来接收。 C.由于小程序没有input submit这个按钮,所以在每个form表单中都要有一个提交按钮, 提交,这个按钮就是用来开启提交事件的。 3.js代码 //index.js //获取应用实例 const app = getApp() Page({ data: { }, formSubmit: function (e) { //console.log(e.detail.value); if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) { wx.showToast({ title: '姓名不能为空或过长!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.xingbie.length == 0) { wx.showToast({ title: '性别不能为空!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.aihao.length == 0) { wx.showToast({ title: '爱好不能为空!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else { wx.request({ url: '接口路径', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: { xingming: e.detail.value.xingming, xingbie: e.detail.value.xingbie, aihao: e.detail.value.aihao }, success: function (res) { console.log(res.data); if (res.data.status == 0) { wx.showToast({ title: '提交失败!!!', icon: 'loading', duration: 1500 }) } else { wx.showToast({ title: '提交成功!!!',//这里打印出登录成功 icon: 'success', duration: 1000 }) } } }) } }, })******js中需要注意的是 Page()这个方法是必须有的,里面放置js对象,用于页面加载的时候,呈现效果 data: {},数据对象,设置页面中的数据,前端可以通过读取这个对象里面的数据来显示出来。 formSubmit: function 小程序中方法都是 方法名:function(),其中function可以传入一个参数,作为触发当前时间 (这里的e,就是当前触发事件的对象,类似于html οnclick=“foo(this)”this对象,小程序封装了许多内置的调用方法, e.detail.value.xingming就是当前对象name=”xingming”的对象的值, e.detail.value.xingming.length就是这 个值的长度 showToast类似于JS中的alert,弹出框,title 是弹出框的显示的信息,icon是弹出框的图标状态,目前 只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。) 重点来了 wx.request({ url: '接口路径', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: { xingming: e.detail.value.xingming, xingbie: e.detail.value.xingbie, aihao: e.detail.value.aihao }, success: function (res) { console.log(res.data); if (res.data.status == 0) { wx.showToast({ title: '提交失败!!!', icon: 'loading', duration: 1500 }) } else { wx.showToast({ title: '提交成功!!!',//这里打印出登录成功 icon: 'success', duration: 1000 }) } } wx.request({})是小程序发起https请求,注意http是不行的。 wx.request({})是小程序发起https请求,注意http是不行的。 这里 A.url是你请求的网址,比如以前在前端,POST表单中action=‘index.php',这里的index.php是相对路径,而小程序 请求的网址必须是网络绝对路径。比如:https://www.xxxxxcom/wx/form.php B. header: { "Content-Type": "application/x-www-form-urlencoded" },由于POST和GET传送数据的方式不一样,POST的header必须是 "Content-Type": "application/x-www-form-urlencoded" GET的header可以是 'Accept': 'application/json' C.一定要写明method:“POST” 默认是“GET”,保持大写 data:{xingming:e.detail.value.xingming,xingbie:e.detail.value.xingbie,aihao:e.detail.value.aihao},这里的data就是POST给服务器端的数据 以{name:value}的形式传送 D.成功回调函数 success: function (res) { // console.log(res.data); if (res.data.status == 0) { wx.showToast({ title: '提交失败!!!', icon: 'loading', duration: 1500 }) } else { wx.showToast({ title: '提交成功!!!', icon: 'success', duration: 1000 }) } }E.success:function()是请求状态成功触发是事件,也就是200的时候,注意,请求成功不是操作成功,请求只是这个 程序到服务器端这条线的通的。 F. if (res.data.status == 0) { wx.showToast({ title: '提交失败!!!', icon: 'loading', duration: 1500 }) } 加一条,单独写的事件也是也可的。具体问题具体对待 saveEvaluate:function (e){ let that = this; let answerPaths = this.data.listData.studentQuestionList[this.data.m].answerPaths; let studentId = this.data.listData.studentQuestionList[this.data.m].studentId; request.post({ url: 接口名称, data: { photoId: this.data.detail.homeworkId, userId: studentId, photoRemark: e.detail.value.photoRemark, photoScore: e.detail.value.photoScore, answerPaths: answerPaths, access_token: app.getToken() } }).then(res => { if (res.data.code == 200) { that.setData({ studentList: that.data.studentList, completeStudentList: that.data.completeStudentList }) //刷新弹框页面数据 wx.navigateTo({ url: '/pages/xxx/xxx/xxx', }) } }) }
学习链接:https://blog.csdn.net/wydd7522/article/details/80724526 |
CopyRight 2018-2019 实验室设备网 版权所有 |