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

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

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

方式1：form表单元素较少

比如用户登录，如下图

前端代码举例

此处省略了部分多余代码

<template><viewstyle="padding:50rpx;"><viewstyle="margin-top:60rpx;"><form@submit="submit"><viewclass="gui-border-bgui-form-item"style="margin-top:80rpx;"><viewclass="gui-form-body"><inputtype="number"class="gui-form-input"v-model="driverTel"name="driverTel"placeholder="手机号"placeholder-style="color:#CACED0"/></view></view><viewclass="gui-border-bgui-form-item"style="margin-top:30rpx;"><viewclass="gui-form-body"><inputtype="password"class="gui-form-input"v-if="isPwd"v-model="password"name="password"placeholder="密码"placeholder-style="color:#CACED0"/><inputtype="text"class="gui-form-input"v-if="!isPwd":disabled="true"v-model="password"name="password"placeholder="密码"placeholder-style="color:#CACED0"/></view><textclass="gui-form-icongui-iconsgui-text-center"@click="changePwdType":style="{color:isPwd?'#999999':'#008AFF'}"></text></view><viewstyle="margin-top:50rpx;"><buttontype="default"class="gui-buttongui-bg-bluemsgBtn"formType="submit"style="border-radius:50rpx;"><textclass="gui-color-whitegui-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")publicResultloginByPassword(LoginUserVOloginUserVO){//处理业务逻辑}/***也可以按照字段名来接收*/@PostMapping("/password")publicResultloginByPassword(Stringusername,Stringpasssword){//处理业务逻辑}

方式1：form表单元素较多

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

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

前端代码举例：

<!–表单元素核心区域–><scroll-view:scroll-y="true":show-scrollbar="false":style="{height:mainHeight+'px'}"><!–第1步–><viewclass="gui-padding"v-if="step==1"><viewclass="gui-form-itemgui-border-b"><textclass="gui-form-label">所属客户</text><viewclass="gui-form-body"><pickermode="selector":range="tenantList":value="tenantIndex"@change="tenantChange($event,tenantList)":range-key="'tenantName'"><viewclass="gui-flexgui-rowsgui-nowrapgui-space-betweengui-align-items-center"><textclass="gui-text">{{tenantList[tenantIndex].tenantName}}</text><textclass="gui-form-icongui-iconsgui-text-centergui-color-gray"></text></view></picker></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">姓名</text><viewclass="gui-form-body"><inputtype="text"class="gui-form-input"v-model="formData.driverName"placeholder="请输入姓名"/></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">手机号</text><viewclass="gui-form-body"><inputtype="text"class="gui-form-input"v-model="formData.driverTel"placeholder="请输入手机号"/></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">身份证号码</text><viewclass="gui-form-body"><inputtype="text"class="gui-form-input"v-model="formData.idNumber"placeholder="请输入身份证号码"/></view></view><viewclass="gui-margin-top"><textclass="gui-form-label"style="width:100%;">身份证照片(个人信息面)</text></view><viewclass="gui-idcard-itemsgui-img-ingui-flexgui-rowsgui-justify-content-center"><viewclass="gui-idcard-items-image"@tap="selectIdPhotoPositive"><gui-image:src="formData.idPhotoPositive":width="380"></gui-image></view></view><viewclass="gui-margin-top"><textclass="gui-form-label"style="width:100%;">身份证照片(国徽图案面)</text></view><viewclass="gui-idcard-itemsgui-img-ingui-flexgui-rowsgui-justify-content-center"><viewclass="gui-idcard-items-image"@tap="selectIdPhotoReverse"><gui-image:src="formData.idPhotoReverse":width="380"></gui-image></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">证件有效期</text><viewclass="gui-form-body"><pickerclass="gui-form-picker"mode="date"@change="idNumberValidUntilChange"><textclass="gui-text">{{formData.idNumberValidUntil}}</text><textclass="gui-iconsicon-arrow-down"style="margin-left:5px;"></text></picker></view></view><viewclass="gui-form-itemgui-border-b"><textclass="gui-form-label">收款人</text><viewclass="gui-form-body"><pickermode="selector":range="payeeList":value="payeeIndex"@change="payeeChange($event,payeeList)":range-key="'payeeName'"><viewclass="gui-flexgui-rowsgui-nowrapgui-space-betweengui-align-items-center"><textclass="gui-text">{{payeeList[payeeIndex].payeeName}}</text><textclass="gui-form-icongui-iconsgui-text-centergui-color-gray"></text></view></picker></view></view></view><!–第2步–><viewclass="gui-padding"v-if="step==2"><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">驾驶证编号</text><viewclass="gui-form-body"><inputtype="text"class="gui-form-input"v-model="formData.drivingLicenseNumber"placeholder="请输入驾驶证编号"/></view></view><viewclass="gui-margin-top"><textclass="gui-form-label"style="width:100%;">驾驶证(主页)</text></view><viewclass="gui-idcard-itemsgui-img-ingui-flexgui-rowsgui-justify-content-center"><viewclass="gui-idcard-items-image"@tap="selectDrivingLicensePhoto"><gui-image:src="formData.drivingLicensePhoto":width="380"></gui-image></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">有效期开始</text><viewclass="gui-form-body"><pickerclass="gui-form-picker"mode="date"@change="drivingLicenseValidityStartChange"><textclass="gui-text">{{formData.drivingLicenseValidityStart}}</text><textclass="gui-iconsicon-arrow-down"style="margin-left:5px;"></text></picker></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">有效期结束</text><viewclass="gui-form-body"><pickerclass="gui-form-picker"mode="date"@change="drivingLicenseValidityEndChange"><textclass="gui-text">{{formData.drivingLicenseValidityEnd}}</text><textclass="gui-iconsicon-arrow-down"style="margin-left:5px;"></text></picker></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">发证机关</text><viewclass="gui-form-body"><inputtype="text"class="gui-form-input"v-model="formData.drivingLicenseIssuingOrg"placeholder="请输入驾驶证发证机关"/></view></view><viewclass="gui-form-itemgui-border-b"><textclass="gui-form-label">准驾车型</text><viewclass="gui-form-body"><pickermode="selector":range="vehicleTypeList":value="vehicleTypeIndex"@change="vehicleTypeChange($event,vehicleTypeList)":range-key="'codeSetName'"><viewclass="gui-flexgui-rowsgui-nowrapgui-space-betweengui-align-items-center"><textclass="gui-text">{{vehicleTypeList[vehicleTypeIndex].codeSetName}}</text><textclass="gui-form-icongui-iconsgui-text-centergui-color-gray"></text></view></picker></view></view><viewclass="gui-form-itemgui-border-b"><textclass="gui-form-label">关联车辆</text><viewclass="gui-form-body"><pickermode="selector":range="vehicleList":value="vehicleIndex"@change="vehicleChange($event,vehicleList)":range-key="'carNumber'"><viewclass="gui-flexgui-rowsgui-nowrapgui-space-betweengui-align-items-center"><textclass="gui-text">{{vehicleList[vehicleIndex].carNumber}}</text><textclass="gui-form-icongui-iconsgui-text-centergui-color-gray"></text></view></picker></view></view></view><!–第3步–><viewclass="gui-padding"v-if="step==3"><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">资格证号码</text><viewclass="gui-form-body"><inputtype="text"class="gui-form-input"v-model="formData.roadTransportQualificationCertificateNumber"placeholder="请输入从业资格证编号"/></view></view><viewclass="gui-margin-top"><textclass="gui-form-label"style="width:100%;">从业资格证</text></view><viewclass="gui-idcard-itemsgui-img-ingui-flexgui-rowsgui-justify-content-center"><viewclass="gui-idcard-items-image"@tap="selectRoadTransportQualificationCertificatePhoto"><gui-image:src="formData.roadTransportQualificationCertificatePhoto":width="380"></gui-image></view></view><viewclass="gui-form-itemgui-margin-topgui-border-b"><textclass="gui-form-label">证件有效期</text><viewclass="gui-form-body"><pickerclass="gui-form-picker"mode="date"@change="roadTransportQualificationCertificateValidUntilChange"><textclass="gui-text">{{formData.roadTransportQualificationCertificateValidUntil}}</text><textclass="gui-iconsicon-arrow-down"style="margin-left:5px;"></text></picker></view></view></view></scroll-view><script>exportdefault{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的方式接收publicResultadd(StringformData){//将JSON字符串转换成JSONObjectJSONObjectjsonObject=JSONObject.parseObject(formData);//继续后续业务逻辑处理returnResults.success();}//针对传参方式二：后台以Object的方式接收publicResultadd(ObjectdriverObj){//继续后续业务逻辑处理returnResults.success();}