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'}"></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字符串到后端，后端接收到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字符串转换成jsonobject jsonobject jsonobject= jsonobject.parseobject(formdata); // 继续后续业务逻辑处理 return results.success();}// 针对传参方式二：后台以object的方式接收public result add(object driverobj){ // 继续后续业务逻辑处理 return results.success();}
推荐：《uniapp教程》
以上就是浅析uni-app中怎么提交form表单？（代码解析）的详细内容。