微信小程序form表單提交到數據庫

1.小程序目錄圖

1. js文件是邏輯控制，主要是它發送請求和接收數據，
2. json 用於此頁面局部 配置並且覆蓋全局app.json配置，
3. wxss用於頁面的樣式設置，
4. wxml就是頁面，相當於html

2.Wxml文件代碼

<form bindsubmit="formSubmit" bindreset="formReset">

  <view class="section">
    <view class="section__title">姓名</view>
    <input name="xingming" placeholder="請輸入姓名" />
  </view>
  <view class="section section_gap">
    <view class="section__title">性別</view>
    <radio-group name="xingbie">
      <label><radio value="男"/>男</label>
      <label><radio value="女"/>女</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">愛好</view>
    <checkbox-group name="aihao">
      <label><checkbox value="旅游"/>旅游</label>
      <label><checkbox value="看書"/>看書</label>
      <label><checkbox value="電動"/>電動</label>
      <label><checkbox value="籃球"/>籃球</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">提交</button>
    <button formType="reset">重置</button>
  </view>
</form>

******重點

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表單中都要有一個提交按鈕，

<button formType="submit">提交</button>，這個按鈕就是用來開啟提交事件的。

3.js代碼

1.  
   //index.js
2.  
   //獲取應用實例
3.  
   const app = getApp()
4.  
   Page({
5.  
   data: {
6.  
   },
7.  
   formSubmit: function (e) {
8.  
   //console.log(e.detail.value);
9.  
   if (e.detail.value.xingming.length == 0 || e.detail.value.xingming.length >= 8) {
10.  
    wx.showToast({
11.  
    title: '姓名不能為空或過長!',
12.  
    icon: 'loading',
13.  
    duration: 1500
14.  
    })
15.  
    setTimeout(function () {
16.  
    wx.hideToast()
17.  
    }, 2000)
18.  
    } else if (e.detail.value.xingbie.length == 0) {
19.  
    wx.showToast({
20.  
    title: '性別不能為空!',
21.  
    icon: 'loading',
22.  
    duration: 1500
23.  
    })
24.  
    setTimeout(function () {
25.  
    wx.hideToast()
26.  
    }, 2000)
27.  
    } else if (e.detail.value.aihao.length == 0) {
28.  
    wx.showToast({
29.  
    title: '愛好不能為空!',
30.  
    icon: 'loading',
31.  
    duration: 1500
32.  
    })
33.  
    setTimeout(function () {
34.  
    wx.hideToast()
35.  
    }, 2000)
36.  
    } else {
37.  
    wx.request({
38.  
    url: '接口路徑',
39.  
    header: {
40.  
    "Content-Type": "application/x-www-form-urlencoded"
41.  
    },
42.  
    method: "POST",
43.  
    data: { xingming: e.detail.value.xingming, xingbie: e.detail.value.xingbie, aihao: e.detail.value.aihao },
44.  
    success: function (res) {
45.  
    console.log(res.data);
46.  
    if (res.data.status == 0) {
47.  
    wx.showToast({
48.  
    title: '提交失敗！！！',
49.  
    icon: 'loading',
50.  
    duration: 1500
51.  
    })
52.  
    } else {
53.  
    wx.showToast({
54.  
    title: '提交成功！！！',//這里打印出登錄成功
55.  
    icon: 'success',
56.  
    duration: 1000
57.  
    })
58.  
    }
59.  
    }
60.  
    })
61.  
    }
62.  
    },
63.  
    })

******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

              })

          } 

加一條，單獨寫的事件也是也可的。具體問題具體對待

1.  
   saveEvaluate:function (e){
2.  
   let that = this;
3.  
   let answerPaths = this.data.listData.studentQuestionList[this.data.m].answerPaths;
4.  
   let studentId = this.data.listData.studentQuestionList[this.data.m].studentId;
5.  
   request.post({
6.  
   url: 接口名稱,
7.  
   data: {
8.  
   photoId: this.data.detail.homeworkId,
9.  
   userId: studentId,
10.  
    photoRemark: e.detail.value.photoRemark,
11.  
    photoScore: e.detail.value.photoScore,
12.  
    answerPaths: answerPaths,
13.  
    access_token: app.getToken()
14.  
    }
15.  
    }).then(res => {
16.  
    if (res.data.code == 200) {
17.  
    that.setData({
18.  
    studentList: that. data.studentList,
19.  
    completeStudentList: that. data.completeStudentList
20.  
    })
21.  
    //刷新彈框頁面數據
22.  
    wx.navigateTo({
23.  
    url: '/pages/xxx/xxx/xxx',
24.  
    })
25.  
    }
26.  
    })
27.  
    }

 

學習鏈接：https://blog.csdn.net/wydd7522/article/details/80724526