微信小程序（十三）实战——Form表单提交

官方手册：

实例走一波 >>>

form.wxml

 

<!--pages/form/form.wxml-->

<text>pages/form/form.wxml</text>

<view class="viewTitle">

<text class="view-Name">form表单</text>

<view class="lineView"></view>

</view>

<!--这里用form，name=“nameName1”可以作为form的属性进行

（e.detail.value.nameName1）调用,

form自带有提交和重置按钮，会自动获取表单中所有控件值的改变-->

<form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">

<view class="section section_gap">

<view class="section__title">switch开关：</view>

<switch name="switch"/>

</view>

<view class="section section_gap">

<view class="section__title">slider滑块：</view>

<slider value="50" name="slider" show-value ></slider>

</view>

<view class="section">

<view class="section__title">input输入框：</view>

<input name="input" style="background-color: #FFFFFF" placeholder="请在这里输入" />

</view>

<view class="section section_gap">

<view class="section__title">radio单选:</view>

<radio-group name="radio-group">

<label><radio value="radio1"/>radio1</label>

<label><radio value="radio2"/>radio2</label>

</radio-group>

</view>

<view class="section section_gap">

<view class="section__title">checkbox多选:</view>

<checkbox-group name="checkbox">

<label><checkbox value="checkbox1"/>checkbox1</label>

<label><checkbox value="checkbox2"/>checkbox2</label>

</checkbox-group>

</view>

<view class="section">

<view class="section__title">地区选择器:</view>

<picker name="areaPicker" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

<view class="picker">

当前选择：{{array[index]}}

</view>

</picker>

</view>

<view class="section">

<view class="section__title">时间选择器:</view>

<picker name="timePicker" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">

<view class="picker">

当前选择: {{time}}

</view>

</picker>

</view>

<view class="section">

<view class="section__title">日期选择器:</view>

<picker name="datePicker" mode="date" value="{{date}}" start="2016-12-20" end="2017-09-01" bindchange="bindDateChange">

<view class="picker">

当前选择: {{date}}

</view>

</picker>

</view>

<view class="btn-area">

<button form-type="submit">Submit提交</button>

<button form-type="reset">Reset重置</button>

</view>

</form>

form.js

 

Page({

//初始化数据

data: {

array: ['成都', '资阳', '绵阳', '自贡'],

index: 0,

date: '2016-12-20',

time: '11:19',

allValue: ''

},

//表单提交按钮

formSubmit: function (e) {

console.log('form发生了submit事件，携带数据为：', e.detail.value)

this.setData({

allValue: e.detail.value

})

},

//表单重置按钮

formReset: function (e) {

console.log('form发生了reset事件，携带数据为：', e.detail.value)

this.setData({

allValue: ''

})

},

//---------------------与选择器相关的方法

//地区选择

bindPickerChange: function (e) {

console.log('picker发送选择改变，携带值为', e.detail.value)

this.setData({

index: e.detail.value

})

},

//日期选择

bindDateChange: function (e) {

this.setData({

date: e.detail.value

})

},

//时间选择

bindTimeChange: function (e) {

this.setData({

time: e.detail.value

})

},

 

})

效果：

提交：

分析：

form.wxml

 

a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,

 bindsubmit=”formSubmit” 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 

b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username’]来接收。

C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，

<button formType="submit">submit提交</button>，这个按钮就是用来开启提交事件的。

form.js

 

Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果

data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。

formSubmit: function  小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象

(e.detail.value）中的e

 

这里的e，就是当前触发事件的对象，类似于html οnclick=“foo(this)”this对象，小程序封装了许多内置的调用方法，e.detail.value.mobile 就是当前对象name=”mobile”的对象的值e.detail.value.mobile.length就是这个值的长度

showToast类似于JS中的alert，弹出框，title  是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。

success: function (res) {
if (res . data . status == 0) {
    wx . showToast({
            title: res . data . info,
            icon: 'loading',
            duration: 1500
          })

      } else {
    wx . showToast({
            title: res . data . info,//这里打印出登录成功
            icon: 'success',
            duration: 1000
          })
      }
}, 

 

 

 

由于POST和GET传送数据的方式不一样：

POST的header必须是：  "Content-Type": "application/x-www-form-urlencoded"  

GET的header可以是:       'content-type': 'application/json'