view plain copy
var app = getApp();
Page({
data:{
// text:"這是一個頁面"
array:["中國","美國","巴西","日本"],
toast1Hidden:true,
modalHidden: true,
modalHidden2: true,
notice_str: '',
index:0
},
toast1Change:function(e){
this.setData({toast1Hidden:true});
},
//彈出確認框
modalTap: function(e) {
this.setData({
modalHidden: false
})
},
confirm_one: function(e) {
console.log(e);
this.setData({
modalHidden: true,
toast1Hidden:false,
-
notice_str: '提交成功'
});
},
cancel_one: function(e) {
console.log(e);
this.setData({
modalHidden: true,
toast1Hidden:false,
notice_str: '取消成功'
});
},
//彈出提示框
modalTap2: function(e) {
this.setData({
modalHidden2: false
})
},
modalChange2: function(e) {
this.setData({
modalHidden2: true
})
},
bindPickerChange: function(e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
},
formSubmit: function(e) {
var that = this;
var formData = e.detail.value;
wx.request({
url: 'http://test.com:8080/test/socket.php?msg=2',
data: formData,
-
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
that.modalTap();
}
})
},
formReset: function() {
console.log('form發生了reset事件');
this.modalTap2();
}
})
3. 部分樣式
[css] view plain copy
#adduser{
background: #f5f5f5;
}
.section__title{
float: left;
width:30%;
}
.form-group{
float: right;
-
width: 70%;
}
.section{
clear: both;
width:90%;
margin: 2rem auto;
}
.input-text{
border: 1pxsolid#ddd;
}
.button{
border: 1pxsolid#1aad19;
border-radius: 2px;
}
.picker{
padding: 13px;
background-color: #FFFFFF;
}
4. 服務器端
[php] view plain copy
var_dump($_REQUEST);
一個帶form表單的頁面
在這裡定義好自己form表單的元素名稱
1234567891011121314151617181920212223242526 表單提交
然後調用wx.request的API方法將表單提交到後臺
Page({ data: { pickerHidden: true, chosen: '' }, pickerConfirm: function(e) { this.setData({ pickerHidden: true }) this.setData({ chosen: e.detail.value }) }, pickerCancel: function(e) { this.setData({ pickerHidden: true }) }, pickerShow: function(e) { this.setData({ pickerHidden: false }) }, formSubmit: function(e) { var _this = this /********************* wx.redirectTo({ url:'create_photo' }) **********************/ wx.request({ url: 'http://dev.wxapp-union.com/setForm', data: { name: e.detail.value.name, age: e.detail.value.age, gender: e.detail.value.gender } , method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8' }, success: function(res){ var err = res.data.error if(err) { _this.setData({ error:err }) } else { wx.redirectTo({ url:'create_photo' }) } }, fail: function() { // fail }, complete: function() { // complete } }) }, formReset: function(e) { console.log('form發生了reset事件，攜帶數據為：', e.detail.value) this.setData({ chosen: '' }) }})這裡需要提到幾個坑，首先是你所有的js和json文件，如果創建了，裡面一定要有內容，哪怕json文件就是一對花括號 {}
哪怕js文件就只有一個Page
Page({})
ok我們來看看效果：
我們可以看到提交的內容是
name:微信小程序聯盟age:18gender:MAN123456
提交的hecontent-type:
application/x-www-form-urlencoded; charset=UTF-8兩個值都是我們在代碼中寫的。
閒話少說，我們看看後臺的斷點
看來我們的req已經成功的接收到了前臺傳過來的表單，然後我一個個的放入我的對象中。最後調用mybatis存入數據庫
這就是我存入數據庫的數據。這樣一個完整的表單提交錄入就完成了。
完整的demo我這裡就不上傳了，因為沒有後臺的服務和數據庫，下了也用不了。我考慮後面是不是可以做成一個簡單的api，然後再把查詢也做了，這樣大家就可以提交之後看到效果了，那個時候再把完整的demo分享出來供大家參考。
以下是建庫腳本，如果有能力的後端猿們也可以幫我把這件事情做了，分享給大家，畢竟眾人拾柴火焰高嘛！
-- ==================================================-- formDemo信息表-- ==================================================DROP TABLE IF EXISTS d_form;CREATE TABLE d_form ( id CHAR(32) NOT NULL COMMENT 'ID序列號', name VARCHAR(32) NOT NULL COMMENT '用戶名', age INT NOT NULL DEFAULT 0 COMMENT '年齡', gender CHAR(32) NOT NULL DEFAULT 'DEFAULT' COMMENT '性別', cre_tim TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '註冊時間', upd_tim DATETIME COMMENT '更新時間', remark VARCHAR(128) COMMENT '備註', PRIMARY KEY (id)) COMMENT='formDemo信息表' ENGINE=InnoDB;CREATE UNIQUE INDEX uniq_idx_form_name ON d_form (name);
閱讀更多 青峰科技 的文章
