小程序表单提交详解
我这提交的是picker里的数据，如果传input的也可以参考此文。
1.wxml
<form bindsubmit='formSubmit'>
<view class="section">
<picker mode="date" start="2014-09-01" end="2100-09-01" bindchange="bindDateChange">
<view class="picker" name="customer_date">
{{customer_date}}
</view>
</picker>
</view>
<button class='Button' formType="submit" >
<text class='buttontext' >提交</text>
</button>
</form>
2.wxcss
.section{
margin-top: 10px;
margin-bottom: 40px;
}
.picker{
padding: 15px;
text-align: center;
background-color: #FFFFFF;
}
.buttonview{
text-align: center;
margin: 0 auto;
}
.Button{
width: 80%;
background: linear-gradient(to right, #4D6FFB , #5CAFFF);
}
.buttontext{
color: #FFFFFF;
}
3.js
var transDate="";
Page({
data:{ },
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
transDate = e.detail.value; //将picker所选的值传给transDate
this.setData({
customer_date: e.detail.value //执行setdata 函数，将picker所选的值在表单中显示出来，customer_date不是<view class="picker" name="customer_date">{{customer_date}}</view> 的name ，是{{customer_date}}中的。
})
},
formSubmit:function(e){
console.log('form发生了submit事件，携带数据为：', transDate );
var data1={};
data1.order_id= orderId; //order_id为字段名 订单id
data1.customer_date= transDate; // customer_date也是字段名
console.log(data1.customer_date); //控制台查看 ，也可不查看
if (transDate==""){ //如果
wx.showModal({
title: '提示',
content: '请输入转船日期',
})
}
else {
console.log(data1)
wx.request({
url: 'http://localhost/api/writeChangeShip', // 数据传到的地址
data: data1,//传入的数据
method: 'POST',
header: {// 设置请求的 header
'content-type': 'application/x-www-form-urlencoded' //这是传输方式为post的写法 ； 如果是get 则是'Content-Type': 'application/json'
},
success: function (res) {
console.log(JSON.stringify(res.data))
wx.showModal({ //提交成功 ，弹框
content: '提交成功',
success: function (res) {
if (res.confirm) { //如果点击弹框的确认则进行下面的操作
// wx.navigateTo({
// url: '../orderlist/orderlist',
// })
}
}
})
}
})
}
},
})
微信小程序
