本案例来自网上资源,个人觉得非常不错,该案例详情介绍了小程序中的表单、数据请求、提示框、确认和非确认框。下面是效果图

表单页面

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

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: 'https://www.100txy.com/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();  
 }  
})  

部分样式

#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;  
}  

服务端接收数据

<?php  
 
var_dump($_REQUEST);