电力供求市场信息    
毕水兴能源通道
大云网 新技术电力软件 正文

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

2018-03-12 15:57:17 csdn　 点击量： 评论 (0)
好了 开始正题了，本节小小研究了下 微信小程序的表单创建与提交先看看效果1 表单页面[html]view plaincopy<viewid="adduser"><formbi

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

先看看效果

1. 表单页面

 

[html] view plain copy
 
  1. <view id="adduser">  
  2.     <form bindsubmit="formSubmit" bindreset="formReset">  
  3.          <view class="section">  
  4.             <view class="section__title">姓名:</view>  
  5.             <view class='form-group'>  
  6.                 <input type="text" class="input-text" name="username" placeholder="请输入姓名" />  
  7.             </view>      
  8.         </view>  
  9.         <view class="section section_gap">  
  10.             <view class="section__title">年龄:</view>  
  11.             <view class='form-group'>  
  12.                 <slider name="age" show-value ></slider>  
  13.             </view>      
  14.         </view>  
  15.         <view class="section section_gap">  
  16.             <view class="section__title">性别:</view>  
  17.             <view class='form-group'>  
  18.                 <radio-group name="gender">  
  19.                   <label><radio value="1"/>男</label>  
  20.                   <label><radio value="0"/>女</label>  
  21.                 </radio-group>  
  22.             </view>      
  23.         </view>  
  24.         <view class="section">  
  25.             <view class="section__title">地区选择:</view>  
  26.             <view class='form-group'>  
  27.                 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
  28.                     <view class="picker">  
  29.                         <input type="hidden" disabled="true" name="addr" value="{{array[index]}}"/>  
  30.                     </view>  
  31.                 </picker>  
  32.             </view>  
  33.         </view>  
  34.         <view class="section section_gap">  
  35.             <view class="section__title">爱好:</view>  
  36.             <view class='form-group'>  
  37.                 <checkbox-group name="hobby">  
  38.                     <label><checkbox value="羽毛球"/>羽毛球</label>  
  39.                     <label><checkbox value="游泳"/>游泳</label>  
  40.                 </checkbox-group>  
  41.             </view>  
  42.         </view>  
  43.           
  44.         <view class="section section_gap">  
  45.             <view class="section__title">是否显示:</view>  
  46.             <view class='form-group'>  
  47.                  <switch name="isshow"/>  
  48.             </view>  
  49.         </view>  
  50.         <view class="section btn-area">  
  51.             <button formType="submit">提交</button>  
  52.             <button formType="reset">清空</button>  
  53.         </view>  
  54.     </form>  
  55.   
  56.      <!-- 黑框提示并消失 -->  
  57.     <toast hidden="{{toast1Hidden}}" bindchange="toast1Change">  
  58.         {{notice_str}}  
  59.     </toast>  
  60.     <!-- 确认框 及 提示框 -->  
  61.     <view class="page__bd">  
  62.         <modal title="确认" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirm_one" bindcancel="cancel_one">  
  63.             确认提交么？  
  64.         </modal>  
  65.         <modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">  
  66.             <view> 提示 </view>  
  67.             <view> 清空成功 </view>  
  68.         </modal>  
  69.     </view>  
  70. </view>      

 

2. js 代码

 

 

[javascript] view plain copy
 
  1. var app = getApp();  
  2. Page({  
  3.   data:{  
  4.     // text:"这是一个页面"  
  5.     array:["中国","美国","巴西","日本"],  
  6.     toast1Hidden:true,  
  7.     modalHidden: true,  
  8.     modalHidden2: true,  
  9.     notice_str: '',  
  10.     index:0  
  11.   },  
  12.   toast1Change:function(e){  
  13.     this.setData({toast1Hidden:true});  
  14.   },  
  15.   //弹出确认框  
  16.   modalTap: function(e) {  
  17.     this.setData({  
  18.       modalHidden: false  
  19.     })  
  20.   },  
  21.   confirm_one: function(e) {  
  22.     console.log(e);  
  23.     this.setData({  
  24.       modalHidden: true,  
  25.       toast1Hidden:false,  
  26.       notice_str: '提交成功'  
  27.     });  
  28.   },  
  29.   cancel_one: function(e) {  
  30.     console.log(e);  
  31.     this.setData({  
  32.       modalHidden: true,  
  33.       toast1Hidden:false,  
  34.       notice_str: '取消成功'  
  35.     });  
  36.   },  
  37.   //弹出提示框  
  38.   modalTap2: function(e) {  
  39.     this.setData({  
  40.       modalHidden2: false  
  41.     })  
  42.   },  
  43.   modalChange2: function(e) {  
  44.     this.setData({  
  45.       modalHidden2: true  
  46.     })  
  47.   },  
  48.   bindPickerChange: function(e) {  
  49.     console.log('picker发送选择改变，携带值为', e.detail.value)  
  50.     this.setData({  
  51.       index: e.detail.value  
  52.     })  
  53.   },  
  54.   onLoad:function(options){  
  55.     // 页面初始化 options为页面跳转所带来的参数  
  56.   },  
  57.   onReady:function(){  
  58.     // 页面渲染完成  
  59.   },  
  60.   onShow:function(){  
  61.     // 页面显示  
  62.   },  
  63.   onHide:function(){  
  64.     // 页面隐藏  
  65.   },  
  66.   onUnload:function(){  
  67.     // 页面关闭  
  68.   },  
  69.   formSubmit: function(e) {  
  70.     var that = this;  
  71.     var formData = e.detail.value;   
  72.     wx.request({  
  73.       url: 'http://test.com:8080/test/socket.php?msg=2',  
  74.       data: formData,  
  75.       header: {  
  76.           'Content-Type': 'application/json'  
  77.       },  
  78.       success: function(res) {  
  79.         console.log(res.data)  
  80.         that.modalTap();  
  81.       }  
  82.     })  
  83.   },  
  84.   formReset: function() {  
  85.     console.log('form发生了reset事件');  
  86.     this.modalTap2();  
  87.   }  
  88. })  


3. 部分样式

 

 

[css] view plain copy
 
  1. #adduser{  
  2.     background: #f5f5f5;  
  3. }  
  4. .section__title{  
  5.     float: left;  
  6.     width:30%;  
  7. }  
  8. .form-group{  
  9.     float: right;  
  10.     width: 70%;  
  11. }  
  12. .section{  
  13.     clear: both;  
  14.     width:90%;  
  15.     margin: 2rem auto;  
  16. }  
  17. .input-text{  
  18.     border: 1px solid #ddd;  
  19. }  
  20. .button{  
  21.     border: 1px solid #1aad19;  
  22.     border-radius: 2px;  
  23. }  
  24. .picker{  
  25.     padding: 13px;  
  26.     background-color: #FFFFFF;  
  27. }  

 

4. 服务器端

 

 

[php] view plain copy
 
  1. <?php  
  2.   
  3. 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

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

大云网官方微信售电那点事儿

责任编辑：售电衡衡

免责声明：本文仅代表作者个人观点，与本站无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
分享到微博分享到微信
我要收藏
个赞
微信小程 表单