浅析uni-app中怎么提交form表单？（代码解析）

uni-app中怎么提交form表单？下面本篇文章就来给大家分享下两种uni-app提交form表单的方式，希望对大家有所帮助！

uni-app提交form表单的两种方式

方式1：form表单元素较少

比如用户登录，如下图

前端代码举例

此处省略了部分多余代码

<template>    <view style="padding:50rpx;">        <view style="margin-top:60rpx;">            <form @submit="submit">                <view class="gui-border-b gui-form-item" style="margin-top:80rpx;">                    <view class="gui-form-body">                        <input type="number" class="gui-form-input" v-model="driverTel" name="driverTel" placeholder="手机号" placeholder-style="color:#CACED0"/>                    </view>                </view>                                 <view class="gui-border-b gui-form-item" style="margin-top:30rpx;">                    <view class="gui-form-body">                        <input type="password" class="gui-form-input" v-if="isPwd"                        v-model="password" name="password" placeholder="密码" placeholder-style="color:#CACED0"/>                        <input type="text" class="gui-form-input" v-if="!isPwd" :disabled="true"                        v-model="password" name="password" placeholder="密码" placeholder-style="color:#CACED0"/>                    </view>                    <text class="gui-form-icon gui-icons gui-text-center"                        @click="changePwdType" :style="{color:isPwd?'#999999':'#008AFF'}">&#xe609;</text>                </view>                                 <view style="margin-top:50rpx;">                    <button type="default" class="gui-button gui-bg-blue msgBtn" formType="submit" style="border-radius:50rpx;">                        <text class="gui-color-white gui-button-text-max">登录</text>                    </button>                </view>            </form>        </view>    </view></template><script>    uni.request({        url: _self.server_host + "/app/driver/login/password",        method:'POST',        header:{'content-type' : "application/x-www-form-urlencoded"},        data:{            // 对于上面的form表单提交，我们可以直接在uni.request的data属性中直接提交就行了            driverTel: _self.driverTel,            password: _self.password        },        success: (res) => {            // 服务器返回结果        }    })</script>

后端代码举例

/*** 这里可以以一个实体类来接收，实体类必须包含前端传参参数的对应字段*/@PostMapping("/password")public Result loginByPassword(LoginUserVO loginUserVO) {    // 处理业务逻辑} /*** 也可以按照字段名来接收*/@PostMapping("/password")public Result loginByPassword(String username, String passsword) {    // 处理业务逻辑}

方式1：form表单元素较多

上面的方法在form表单元素较多时处理起来就比较费事了，一般像新增用户、商品之类的form表单少则十几个，多则几十个。如下图：

如果按照上面的写法，不仅前端写起来费事不雅观，后台接受也要一个字段一个字段的接收也煞是费劲，这个时候我们可以定义一个对象formData，将数据保存到里面提交时直接提交JSON字符串到后端，