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

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

先看看效果

1. 表单页面

   

         
            姓名:
           
               
               
       
       
            年龄:
           
               
               
       
       
            性别:
           
               
                  男
                  女
               
               
       
       
            地区选择:
           
               
                   
                       
                   
               
           
       
       
            爱好:
           
               
                    羽毛球
                    游泳
               
           
       
        
       
            是否显示:
           
                 
           
       
       
            提交
            清空
       
   

 
     
   
   
   
       
       
   
   

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. 服务器端
 
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 
版权声明：本文为博主原创文章，转载请附上博文链接！