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

缺乏、安全感 2022-07-16 08:48 385阅读 0赞

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

先看看效果

![Center][]

## 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 代码 ##

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

<?php
    
    var_dump($_REQUEST);

本节 集合了  
表单  [https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html?t=1476197486816][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_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_toast.html_t_1476197486420]

确认和非确认框  [https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278][https_mp.weixin.qq.com_debug_wxadoc_dev_component_modal.html_t_1476197489278]

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

[Center]: /images/20220716/86ffb3b4abf74d38a56a227a3c9cc5f3.png
[https_mp.weixin.qq.com_debug_wxadoc_dev_component_form.html_t_1476197486816]: 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/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/toast.html?t=1476197486420
[https_mp.weixin.qq.com_debug_wxadoc_dev_component_modal.html_t_1476197489278]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278