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

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

先看看效果

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. 服务器端

<?phpvar_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

以及相关表单的信息，之后将分解讲解对应的小功能。

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

uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
微信小程序---网络数据请求
目录学习笔记网络数据请求小程序中网络数据请求的限制配置request合法域名发起get请求发起post请求在页面加载时请求数据跳过request合法域名校验关于跨域和Ajax的说明 ...
微信小程序中使用form表单
首先,我同事说微信小程序中不能使用form.what?他妈的逗我呢.那么多数据一个一个的赋值不麻烦么?怎么可能.只是自作做一下了.看了一下文档,就有form的组件,也给了案例.心中千万个..... 不 ...
微信小程序-网络数据请求
网络数据请求 1.小程序中网络数据请求的限制出于安全方面的考虑,小程序对数据接口的请求做出了如下两个限制: ①只能请求HTTPS类型的接口 ②必须将接口的域名添加到信任列表中配置合法域名: 配置步 ...
微信小程序网络数据请求
小程序发起网络请求使用的是微信的 api wx.request: 在监听页面加载函数中使用. wx.request({ url: -- 请求的链接地址 data: -- 传的参数 header: -- ...
微信小程序实现调查问卷表单
微信小程序问卷调查表单功能演示: 20220408_202155 index.wxml <view id="container-top"> <view id=& ...
微信小程序实现用form表单包裹输入的数据并上传到服务器
两个输入框分别为input与textarea,然后用form表单包裹两个输入框所输入的数据,再上传到服务器,效果图: post.wxml <form bindsubmit="formS ...
Uniapp微信小程序实现简易生成表单生成器
在开发一些填报小程序,一些小型办公小程序的时候,难免会遇到较多的需要填写的表单信息,纯手撸表单耗时耗力. TIP:类似于这种十种类型的表单,每种类型的表单并不一样下面将分为三个部分一.创建对应类型 ...

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

1. 表单页面

2. js 代码

3. 部分样式

4. 服务器端

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

最新文章

热门文章

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

1. 表单页面

2. js 代码

3. 部分样式

4. 服务器端

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

最新文章

热门文章

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

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