首页-教程-Web前端

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

 4941

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


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


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

方式1：form表单元素较少

比如用户登录，如下图


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

前端代码举例

此处省略了部分多余代码

  1. <template>
  2.     <view style="padding:50rpx;">
  3.         <view style="margin-top:60rpx;">
  4.             <form @submit="submit">
  5.                 <view class="gui-border-b gui-form-item" style="margin-top:80rpx;">
  6.                     <view class="gui-form-body">
  7.                         <input type="number" class="gui-form-input" v-model="driverTel" name="driverTel" placeholder="手机号" placeholder-style="color:#CACED0"/>
  8.                     </view>
  9.                 </view>
  10.                  
  11.                 <view class="gui-border-b gui-form-item" style="margin-top:30rpx;">
  12.                     <view class="gui-form-body">
  13.                         <input type="password" class="gui-form-input" v-if="isPwd"
  14.                         v-model="password" name="password" placeholder="密码" placeholder-style="color:#CACED0"/>
  15.                         <input type="text" class="gui-form-input" v-if="!isPwd" :disabled="true"
  16.                         v-model="password" name="password" placeholder="密码" placeholder-style="color:#CACED0"/>
  17.                     </view>
  18.                     <text class="gui-form-icon gui-icons gui-text-center"
  19.                         @click="changePwdType" :style="{color:isPwd?'#999999':'#008AFF'}">&#xe609;</text>
  20.                 </view>
  21.                  
  22.                 <view style="margin-top:50rpx;">
  23.                     <button type="default" class="gui-button gui-bg-blue msgBtn" formType="submit" style="border-radius:50rpx;">
  24.                         <text class="gui-color-white gui-button-text-max">登录</text>
  25.                     </button>
  26.                 </view>
  27.             </form>
  28.         </view>
  29.     </view>
  30. </template>
  31. <script>
  32.     uni.request({
  33.         url: _self.server_host + "/app/driver/login/password",
  34.         method:'POST',
  35.         header:{'content-type' : "application/x-www-form-urlencoded"},
  36.         data:{
  37.             // 对于上面的form表单提交，我们可以直接在uni.request的data属性中直接提交就行了
  38.             driverTel: _self.driverTel,
  39.             password: _self.password
  40.         },
  41.         success: (res) => {
  42.             // 服务器返回结果
  43.         }
  44.     })
  45. </script>


后端代码举例

  1. /**
  2. * 这里可以以一个实体类来接收，实体类必须包含前端传参参数的对应字段
  3. */
  4. @PostMapping("/password")
  5. public Result loginByPassword(LoginUserVO loginUserVO) {
  6.     // 处理业务逻辑
  7. }
  8.  
  9. /**
  10. * 也可以按照字段名来接收
  11. */
  12. @PostMapping("/password")
  13. public Result loginByPassword(String username, String passsword) {
  14.     // 处理业务逻辑
  15. }


方式1：form表单元素较多

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


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


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

前端代码举例：

  1. <!-- 表单元素核心区域 -->
  2. <scroll-view :scroll-y="true" :show-scrollbar="false" :style="{height:mainHeight+'px'}">
  3.     <!-- 第1步 -->
  4.     <view class="gui-padding" v-if="step == 1">
  5.         <view class="gui-form-item gui-border-b">
  6.             <text class="gui-form-label">所属客户</text>
  7.             <view class="gui-form-body">
  8.                 <picker mode="selector" :range="tenantList" :value="tenantIndex" @change="tenantChange($event,tenantList)" :range-key="'tenantName'">
  9.                     <view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
  10.                         <text class="gui-text">{{tenantList[tenantIndex].tenantName}}</text>
  11.                         <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
  12.                     </view>
  13.                 </picker>
  14.             </view>
  15.         </view>
  16.          
  17.         <view class="gui-form-item gui-margin-top gui-border-b">
  18.             <text class="gui-form-label">姓名</text>
  19.             <view class="gui-form-body">
  20.                 <input type="text" class="gui-form-input" v-model="formData.driverName" placeholder="请输入姓名" />
  21.             </view>
  22.         </view>
  23.          
  24.         <view class="gui-form-item gui-margin-top gui-border-b">
  25.             <text class="gui-form-label">手机号</text>
  26.             <view class="gui-form-body">
  27.                 <input type="text" class="gui-form-input" v-model="formData.driverTel" placeholder="请输入手机号" />
  28.             </view>
  29.         </view>
  30.          
  31.         <view class="gui-form-item gui-margin-top gui-border-b">
  32.             <text class="gui-form-label">身份证号码</text>
  33.             <view class="gui-form-body">
  34.                 <input type="text" class="gui-form-input" v-model="formData.idNumber" placeholder="请输入身份证号码" />
  35.             </view>
  36.         </view>
  37.          
  38.         <view class="gui-margin-top">
  39.             <text class="gui-form-label" style="width: 100%;">身份证照片(个人信息面)</text>
  40.         </view>
  41.         <view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
  42.             <view class="gui-idcard-items-image" @tap="selectIdPhotoPositive">
  43.                 <gui-image :src="formData.idPhotoPositive" :width="380"></gui-image>
  44.             </view>
  45.         </view>
  46.          
  47.         <view class="gui-margin-top">
  48.             <text class="gui-form-label" style="width: 100%;">身份证照片(国徽图案面)</text>
  49.         </view>
  50.         <view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
  51.             <view class="gui-idcard-items-image" @tap="selectIdPhotoReverse">
  52.                 <gui-image :src="formData.idPhotoReverse" :width="380"></gui-image>
  53.             </view>
  54.         </view>
  55.          
  56.         <view class="gui-form-item gui-margin-top gui-border-b">
  57.             <text class="gui-form-label">证件有效期</text>
  58.             <view class="gui-form-body">
  59.                 <picker class="gui-form-picker" mode="date" @change="idNumberValidUntilChange">
  60.                     <text class="gui-text">{{formData.idNumberValidUntil}}</text>
  61.                     <text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
  62.                 </picker>
  63.             </view>
  64.         </view>
  65.          
  66.         <view class="gui-form-item gui-border-b">
  67.             <text class="gui-form-label">收款人</text>
  68.             <view class="gui-form-body">
  69.                 <picker mode="selector" :range="payeeList" :value="payeeIndex" @change="payeeChange($event,payeeList)" :range-key="'payeeName'">
  70.                     <view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
  71.                         <text class="gui-text">{{payeeList[payeeIndex].payeeName}}</text>
  72.                         <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
  73.                     </view>
  74.                 </picker>
  75.             </view>
  76.         </view>
  77.     </view>
  78.  
  79.     <!-- 第2步 -->
  80.     <view class="gui-padding" v-if="step == 2">
  81.         <view class="gui-form-item gui-margin-top gui-border-b">
  82.             <text class="gui-form-label">驾驶证编号</text>
  83.             <view class="gui-form-body">
  84.                 <input type="text" class="gui-form-input" v-model="formData.drivingLicenseNumber" placeholder="请输入驾驶证编号" />
  85.             </view>
  86.         </view>
  87.          
  88.         <view class="gui-margin-top">
  89.             <text class="gui-form-label" style="width: 100%;">驾驶证(主页)</text>
  90.         </view>
  91.         <view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
  92.             <view class="gui-idcard-items-image" @tap="selectDrivingLicensePhoto">
  93.                 <gui-image :src="formData.drivingLicensePhoto" :width="380"></gui-image>
  94.             </view>
  95.         </view>
  96.          
  97.         <view class="gui-form-item gui-margin-top gui-border-b">
  98.             <text class="gui-form-label">有效期开始</text>
  99.             <view class="gui-form-body">
  100.                 <picker class="gui-form-picker" mode="date" @change="drivingLicenseValidityStartChange">
  101.                     <text class="gui-text">{{formData.drivingLicenseValidityStart}}</text>
  102.                     <text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
  103.                 </picker>
  104.             </view>
  105.         </view>
  106.          
  107.         <view class="gui-form-item gui-margin-top gui-border-b">
  108.             <text class="gui-form-label">有效期结束</text>
  109.             <view class="gui-form-body">
  110.                 <picker class="gui-form-picker" mode="date" @change="drivingLicenseValidityEndChange">
  111.                     <text class="gui-text">{{formData.drivingLicenseValidityEnd}}</text>
  112.                     <text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
  113.                 </picker>
  114.             </view>
  115.         </view>
  116.          
  117.         <view class="gui-form-item gui-margin-top gui-border-b">
  118.             <text class="gui-form-label">发证机关</text>
  119.             <view class="gui-form-body">
  120.                 <input type="text" class="gui-form-input" v-model="formData.drivingLicenseIssuingOrg" placeholder="请输入驾驶证发证机关" />
  121.             </view>
  122.         </view>
  123.          
  124.         <view class="gui-form-item gui-border-b">
  125.             <text class="gui-form-label">准驾车型</text>
  126.             <view class="gui-form-body">
  127.                 <picker mode="selector" :range="vehicleTypeList" :value="vehicleTypeIndex" @change="vehicleTypeChange($event,vehicleTypeList)" :range-key="'codeSetName'">
  128.                     <view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
  129.                         <text class="gui-text">{{vehicleTypeList[vehicleTypeIndex].codeSetName}}</text>
  130.                         <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
  131.                     </view>
  132.                 </picker>
  133.             </view>
  134.         </view>
  135.          
  136.         <view class="gui-form-item gui-border-b">
  137.             <text class="gui-form-label">关联车辆</text>
  138.             <view class="gui-form-body">
  139.                 <picker mode="selector" :range="vehicleList" :value="vehicleIndex" @change="vehicleChange($event,vehicleList)" :range-key="'carNumber'">
  140.                     <view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
  141.                         <text class="gui-text">{{vehicleList[vehicleIndex].carNumber}}</text>
  142.                         <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
  143.                     </view>
  144.                 </picker>
  145.             </view>
  146.         </view>
  147.     </view>
  148.  
  149.     <!-- 第3步 -->
  150.     <view class="gui-padding" v-if="step == 3">
  151.         <view class="gui-form-item gui-margin-top gui-border-b">
  152.             <text class="gui-form-label">资格证号码</text>
  153.             <view class="gui-form-body">
  154.                 <input type="text" class="gui-form-input" v-model="formData.roadTransportQualificationCertificateNumber" placeholder="请输入从业资格证编号" />
  155.             </view>
  156.         </view>
  157.          
  158.         <view class="gui-margin-top">
  159.             <text class="gui-form-label" style="width: 100%;">从业资格证</text>
  160.         </view>
  161.         <view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
  162.             <view class="gui-idcard-items-image" @tap="selectRoadTransportQualificationCertificatePhoto">
  163.                 <gui-image :src="formData.roadTransportQualificationCertificatePhoto" :width="380"></gui-image>
  164.             </view>
  165.         </view>
  166.          
  167.         <view class="gui-form-item gui-margin-top gui-border-b">
  168.             <text class="gui-form-label">证件有效期</text>
  169.             <view class="gui-form-body">
  170.                 <picker class="gui-form-picker" mode="date" @change="roadTransportQualificationCertificateValidUntilChange">
  171.                     <text class="gui-text">{{formData.roadTransportQualificationCertificateValidUntil}}</text>
  172.                     <text class="gui-icons icon-arrow-down" style="margin-left:5px;"></text>
  173.                 </picker>
  174.             </view>
  175.         </view>
  176.     </view>
  177. </scroll-view>
  178.  
  179. <script>
  180.     export default {
  181.         data() {
  182.             return {
  183.                 // 表单数据记录
  184.                 formData: {
  185.                     // 第一步
  186.                     tenantId: '',                                                           // 所属客户
  187.                     payeeId: '',                                                            // 收款人
  188.                     driverName: '',                                                         // 司机姓名
  189.                     driverTel: '',                                                          // 司机电话
  190.                     idNumber: '',                                                           // 身份证号码
  191.                     idNumberValidUntil:'请选择证件有效期',                                  // 身份证有效期
  192.                     idPhotoPositive: 'https://www.zzwlnet.com/files/images/upload_identity_card_front.png',                         // 身份证正面（个人信息面）
  193.                     idPhotoReverse: 'https://www.zzwlnet.com/files/images/upload_identity_card_contrary.png',                       // 身份证反面（国徽面）
  194.                      
  195.                     // 第二步
  196.                     drivingLicenseNumber: '',                                               // 驾驶证编号
  197.                     drivingLicensePhoto: 'https://www.zzwlnet.com/files/images/upload_driving_license.png',                         // 驾驶证图片
  198.                     drivingLicenseValidityStart: '请选择证件有效期开始时间',                    // 驾驶证有效期开始
  199.                     drivingLicenseValidityEnd: '请选择证件有效期结束时间',                  // 驾驶证有效期结束
  200.                     drivingLicenseIssuingOrg: '',                                           // 驾驶证发证机关
  201.                     quasiDrivingType: '',                                                   // 准驾车型
  202.                     vehicleId: '',                                                          // 关联车辆
  203.                      
  204.                     // 第三步
  205.                     roadTransportQualificationCertificateNumber: '',                        // 从业资格证号
  206.                     roadTransportQualificationCertificatePhoto: 'https://www.zzwlnet.com/files/images/upload_road_transport_qualification_certificate.png', // 从业资格证图片
  207.                     roadTransportQualificationCertificateValidUntil: '请选择证件有效期',        // 从业资格证有效期
  208.                 },
  209.             }
  210.         },
  211.         methods: {
  212.             submit: function() {
  213.                 uni.request({
  214.                     url: _self.server_host + '/api',
  215.                     method: 'POST',
  216.                     header: {'content-type' : "application/x-www-form-urlencoded"},
  217.                     data: {
  218.                         // 传参方式一：以JSON字符串的形式提交form表单数据
  219.                         formData: JSON.stringify(_self.formData),
  220.                         // 传参方式二：将form表单数据以对象形式传递
  221.                         // formData: _self.formData,
  222.                     },
  223.                     success: res => {
  224.                         // 服务器返回数据，后续业务逻辑处理
  225.                     },
  226.                     fail: () => {
  227.                         uni.showToast({ title: "服务器响应失败，请稍后再试！", icon : "none"});
  228.                     },
  229.                     complete: () => {}
  230.                 });
  231.             }
  232.         }
  233.     }
  234. </script>


后端java代码举例

  1. // 针对传参方式一：后台以String的方式接收
  2. public Result add(String formData){
  3.     // 将JSON字符串转换成JSONObject
  4.     JSONObject jsonObject= JSONObject.parseObject(formData);
  5.     // 继续后续业务逻辑处理
  6.     return Results.success();
  7. }
  8.  
  9. // 针对传参方式二：后台以Object的方式接收
  10. public Result add(Object driverObj){
  11.     // 继续后续业务逻辑处理
  12.     return Results.success();
  13. }



TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-11009.html
站长图库 - 浅析uni-app中怎么提交form表单？（代码解析）
申明：本文转载于《CSDN》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐