微信小程式form表單提交到資料庫
1.小程式目錄圖
- js檔案是邏輯控制，主要是它傳送請求和接收資料，
- json 用於此頁面區域性 配置並且覆蓋全域性app.json配置，
- wxss用於頁面的樣式設定，
- 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中的 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
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