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

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'}"></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) {// 处理业务逻辑
}

form表单元素较多

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

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

前端代码举例：

<!-- 表单元素核心区域 -->
<scroll-view :scroll-y="true" :show-scrollbar="false" :style="{height:mainHeight+'px'}"><!-- 第1步 --><view class="gui-padding" v-if="step == 1"><view class="gui-form-item gui-border-b"><text class="gui-form-label">所属客户</text><view class="gui-form-body"><picker mode="selector" :range="tenantList" :value="tenantIndex" @change="tenantChange($event,tenantList)" :range-key="'tenantName'"><view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"><text class="gui-text">{{tenantList[tenantIndex].tenantName}}</text><text class="gui-form-icon gui-icons gui-text-center gui-color-gray"></text></view></picker></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">姓名</text><view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.driverName" placeholder="请输入姓名" /></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">手机号</text><view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.driverTel" placeholder="请输入手机号" /></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">身份证号码</text><view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.idNumber" placeholder="请输入身份证号码" /></view></view><view class="gui-margin-top"><text class="gui-form-label" style="width: 100%;">身份证照片(个人信息面)</text></view><view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center"><view class="gui-idcard-items-image" @tap="selectIdPhotoPositive"><gui-image :src="formData.idPhotoPositive" :width="380"></gui-image></view></view><view class="gui-margin-top"><text class="gui-form-label" style="width: 100%;">身份证照片(国徽图案面)</text></view><view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center"><view class="gui-idcard-items-image" @tap="selectIdPhotoReverse"><gui-image :src="formData.idPhotoReverse" :width="380"></gui-image></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">证件有效期</text><view class="gui-form-body"><picker class="gui-form-picker" mode="date" @change="idNumberValidUntilChange"><text class="gui-text">{{formData.idNumberValidUntil}}</text><text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text></picker></view></view><view class="gui-form-item gui-border-b"><text class="gui-form-label">收款人</text><view class="gui-form-body"><picker mode="selector" :range="payeeList" :value="payeeIndex" @change="payeeChange($event,payeeList)" :range-key="'payeeName'"><view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"><text class="gui-text">{{payeeList[payeeIndex].payeeName}}</text><text class="gui-form-icon gui-icons gui-text-center gui-color-gray"></text></view></picker></view></view></view><!-- 第2步 --><view class="gui-padding" v-if="step == 2"><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">驾驶证编号</text><view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.drivingLicenseNumber" placeholder="请输入驾驶证编号" /></view></view><view class="gui-margin-top"><text class="gui-form-label" style="width: 100%;">驾驶证(主页)</text></view><view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center"><view class="gui-idcard-items-image" @tap="selectDrivingLicensePhoto"><gui-image :src="formData.drivingLicensePhoto" :width="380"></gui-image></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">有效期开始</text><view class="gui-form-body"><picker class="gui-form-picker" mode="date" @change="drivingLicenseValidityStartChange"><text class="gui-text">{{formData.drivingLicenseValidityStart}}</text><text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text></picker></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">有效期结束</text><view class="gui-form-body"><picker class="gui-form-picker" mode="date" @change="drivingLicenseValidityEndChange"><text class="gui-text">{{formData.drivingLicenseValidityEnd}}</text><text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text></picker></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">发证机关</text><view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.drivingLicenseIssuingOrg" placeholder="请输入驾驶证发证机关" /></view></view><view class="gui-form-item gui-border-b"><text class="gui-form-label">准驾车型</text><view class="gui-form-body"><picker mode="selector" :range="vehicleTypeList" :value="vehicleTypeIndex" @change="vehicleTypeChange($event,vehicleTypeList)" :range-key="'codeSetName'"><view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"><text class="gui-text">{{vehicleTypeList[vehicleTypeIndex].codeSetName}}</text><text class="gui-form-icon gui-icons gui-text-center gui-color-gray"></text></view></picker></view></view><view class="gui-form-item gui-border-b"><text class="gui-form-label">关联车辆</text><view class="gui-form-body"><picker mode="selector" :range="vehicleList" :value="vehicleIndex" @change="vehicleChange($event,vehicleList)" :range-key="'carNumber'"><view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"><text class="gui-text">{{vehicleList[vehicleIndex].carNumber}}</text><text class="gui-form-icon gui-icons gui-text-center gui-color-gray"></text></view></picker></view></view></view><!-- 第3步 --><view class="gui-padding" v-if="step == 3"><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">资格证号码</text><view class="gui-form-body"><input type="text" class="gui-form-input" v-model="formData.roadTransportQualificationCertificateNumber" placeholder="请输入从业资格证编号" /></view></view><view class="gui-margin-top"><text class="gui-form-label" style="width: 100%;">从业资格证</text></view><view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center"><view class="gui-idcard-items-image" @tap="selectRoadTransportQualificationCertificatePhoto"><gui-image :src="formData.roadTransportQualificationCertificatePhoto" :width="380"></gui-image></view></view><view class="gui-form-item gui-margin-top gui-border-b"><text class="gui-form-label">证件有效期</text><view class="gui-form-body"><picker class="gui-form-picker" mode="date" @change="roadTransportQualificationCertificateValidUntilChange"><text class="gui-text">{{formData.roadTransportQualificationCertificateValidUntil}}</text><text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text></picker></view></view></view>
</scroll-view><script>export default {data() {return {// 表单数据记录formData: {// 第一步tenantId: '',                                                         // 所属客户payeeId: '',                                                           // 收款人driverName: '',                                                         // 司机姓名driverTel: '',                                                         // 司机电话idNumber: '',                                                          // 身份证号码idNumberValidUntil:'请选择证件有效期',                                    // 身份证有效期idPhotoPositive: 'https://www.zzwlnet.com/files/images/upload_identity_card_front.png',                          // 身份证正面（个人信息面）idPhotoReverse: 'https://www.zzwlnet.com/files/images/upload_identity_card_contrary.png',                        // 身份证反面（国徽面）// 第二步drivingLicenseNumber: '',                                                // 驾驶证编号drivingLicensePhoto: 'https://www.zzwlnet.com/files/images/upload_driving_license.png',                           // 驾驶证图片drivingLicenseValidityStart: '请选择证件有效期开始时间',                  // 驾驶证有效期开始drivingLicenseValidityEnd: '请选择证件有效期结束时间',                 // 驾驶证有效期结束drivingLicenseIssuingOrg: '',                                          // 驾驶证发证机关quasiDrivingType: '',                                                   // 准驾车型vehicleId: '',                                                         // 关联车辆// 第三步roadTransportQualificationCertificateNumber: '',                     // 从业资格证号roadTransportQualificationCertificatePhoto: 'https://www.zzwlnet.com/files/images/upload_road_transport_qualification_certificate.png',  // 从业资格证图片roadTransportQualificationCertificateValidUntil: '请选择证件有效期',        // 从业资格证有效期},}},methods: {submit: function() {uni.request({url: _self.server_host + '/api',method: 'POST',header: {'content-type' : "application/x-www-form-urlencoded"},data: {// 传参方式一：以JSON字符串的形式提交form表单数据formData: JSON.stringify(_self.formData),// 传参方式二：将form表单数据以对象形式传递// formData: _self.formData,},success: res => {// 服务器返回数据，后续业务逻辑处理},fail: () => {uni.showToast({ title: "服务器响应失败，请稍后再试！", icon : "none"});},complete: () => {}});}}}
</script>

后端java代码举例

// 针对传参方式一：后台以String的方式接收
public Result add(String formData){// 将JSON字符串转换成JSONObjectJSONObject jsonObject= JSONObject.parseObject(formData);// 继续后续业务逻辑处理return Results.success();
}// 针对传参方式二：后台以Object的方式接收
public Result add(Object driverObj){// 继续后续业务逻辑处理return Results.success();
}

uni-app.02.提交form表单的两种方式相关推荐

使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
html表单调用js方法,使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
js提交form表单的两种方法
当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面的头部插入一 ...
Ajax提交Form表单的两种简单方式
在现在的项目开发中,ajax的应用是必不可免的,最为基本的就是利用ajax的异步处理方式来向后台提交数据.关于ajax提交表单我利用到了两种简单的方式. 方法一## 先获取表单里面的数据,再通过aja ...
form表单的两种提交方式，submit和button的用法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面 ...
form表单的两种提交
今天在和同学写一些代码,遇到了一些问题,在购物车页面,修改购买数量,如何把前端获取的数据传递过去,用到了提交,但是我们做批量删除时,已经用到了提交,经过网上查阅可得: 在<form action ...
CGI提交表单的两种方式POST与GET
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
ajax提交form表单
ajax和form表单有很多有趣的互动,ajax提交form表单就是其中一种,这种方法主要是用来提交带图数据的. html页面,我把图片单独放到form表单内,其他数据放到form外即可 <fo ...

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

提交form表单的两种方式