微信小程序六（数据请求表单的创建提交与接收）

好了开始正题了，本节小小研究了下微信小程序的表单创建与提交

先看看效果

1. 表单页面
<view id="adduser">
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section">
<view class="section__title">姓名:</view>
<view class='form-group'>
<input type="text" class="input-text" name="username" placeholder="请输入姓名" />
</view>
</view>
<view class="section section_gap">
<view class="section__title">年龄:</view>
<view class='form-group'>
<slider name="age" show-value ></slider>
</view>
</view>
<view class="section section_gap">
<view class="section__title">性别:</view>
<view class='form-group'>
<radio-group name="gender">
<label><radio value="1"/>男</label>
<label><radio value="0"/>女</label>
</radio-group>
</view>
</view>
<view class="section">
<view class="section__title">地区选择:</view>
<view class='form-group'>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
<input type="hidden" disabled="true" name="addr" value="{{array[index]}}"/>
</view>
</picker>
</view>
</view>
<view class="section section_gap">
<view class="section__title">爱好:</view>
<view class='form-group'>
<checkbox-group name="hobby">
<label><checkbox value="羽毛球"/>羽毛球</label>
<label><checkbox value="游泳"/>游泳</label>
</checkbox-group>
</view>
</view>

<view class="section section_gap">
<view class="section__title">是否显示:</view>
<view class='form-group'>
<switch name="isshow"/>
</view>
</view>
<view class="section btn-area">
<button formType="submit">提交</button>
<button formType="reset">清空</button>
</view>
</form>


<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
{{notice_str}}
</toast>

<view class="page__bd">
<modal title="确认" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirm_one" bindcancel="cancel_one">
确认提交么？
</modal>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
<view> 提示 </view>
<view> 清空成功 </view>
</modal>
</view>
</view>

2. js 代码
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. 部分样式
#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: 1px solid #ddd;
}
.button{
border: 1px solid #1aad19;
border-radius: 2px;
}
.picker{
padding: 13px;
background-color: #FFFFFF;
}

4. 服务器端
<?php

var_dump($_REQUEST);

本节集合了
表单 https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html?t=1476197486816
数据请求 https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html?t=1476197484427

提示框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/toast.html?t=1476197486420

确认和非确认框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278

以及相关表单的信息，之后将分解讲解对应的小功能。
---------------------
作者：栁罗风尘
来源：CSDN
原文：https://blog.csdn.net/wujiangwei567/article/details/52795656
版权声明：本文为博主原创文章，转载请附上博文链接！

微信小程序六（数据请求 表单的创建 提交 与接收）

猜你喜欢

微信小程序六（数据请求表单的创建提交与接收）