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

1.小程序目录图

js文件是逻辑控制，主要是它发送请求和接收数据，
json 用于此页面局部配置并且覆盖全局app.json配置，
wxss用于页面的样式设置，
wxml就是页面，相当于html

2.Wxml文件代码

******重点

A.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

bindsubmit=”formSubmit” 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 onsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。

B.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username']来接收。

C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

<button formType="submit">提交</button>，这个按钮就是用来开启提交事件的。

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 onclick=“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

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

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

猜你喜欢