search
HomeWeb Front-enduni-appA brief analysis of how to submit a form in uni-app? (code analysis)

A brief analysis of how to submit a form in uni-app? (code analysis)

青灯夜游
青灯夜游
Feb 10, 2022 pm 07:09 PM
uniappform submission

How to submit form in uni-app? The following article will share with you two ways to submit form forms in uni-app. I hope it will be helpful to you!

A brief analysis of how to submit a form in uni-app? (code analysis)

Two ways for uni-app to submit the form

Method 1: The form form elements are smaller Less

For example, user login, as shown below

A brief analysis of how to submit a form in uni-app? (code analysis)

Example of front-end code

This Some redundant code has been omitted 

<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?&#39;#999999&#39;:&#39;#008AFF&#39;}">&#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:&#39;POST&#39;,
		header:{&#39;content-type&#39; : "application/x-www-form-urlencoded"},
		data:{
			// 对于上面的form表单提交，我们可以直接在uni.request的data属性中直接提交就行了
			driverTel: _self.driverTel,
			password: _self.password
		},
		success: (res) => {
			// 服务器返回结果
		}
	})
</script>

Back-end code example

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

/**
* 也可以按照字段名来接收
*/
@PostMapping("/password")
public Result loginByPassword(String username, String passsword) {
	// 处理业务逻辑
}

Method 1: There are many form elements

The above method is more troublesome to process when there are many form elements. Generally, form forms such as adding new users and products can range from a dozen to dozens. indivual. As shown below:
A brief analysis of how to submit a form in uni-app? (code analysis)
If you follow the above writing method, not only the front-end is troublesome and unsightly to write, but the background reception also requires field-by-field reception. At this time, we can define an objectformData, save the data in it and submit the JSON string directly to the backend when submitting. The backend receives the JSON string and converts it into a JSON object, and then performs its own business logic processing

Front-end code example: 

<!-- 表单元素核心区域 -->
<scroll-view :scroll-y="true" :show-scrollbar="false" :style="{height:mainHeight+&#39;px&#39;}">
	<!-- 第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="&#39;tenantName&#39;">
					<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">&#xe603;</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="&#39;payeeName&#39;">
					<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">&#xe603;</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="&#39;codeSetName&#39;">
					<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">&#xe603;</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="&#39;carNumber&#39;">
					<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">&#xe603;</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: &#39;&#39;,															// 所属客户
					payeeId: &#39;&#39;,															// 收款人
					driverName: &#39;&#39;,															// 司机姓名
					driverTel: &#39;&#39;,															// 司机电话
					idNumber: &#39;&#39;,															// 身份证号码
					idNumberValidUntil:&#39;请选择证件有效期&#39;,									// 身份证有效期
					idPhotoPositive: &#39;https://www.zzwlnet.com/files/images/upload_identity_card_front.png&#39;,							// 身份证正面（个人信息面）
					idPhotoReverse: &#39;https://www.zzwlnet.com/files/images/upload_identity_card_contrary.png&#39;,						// 身份证反面（国徽面）
					
					// 第二步
					drivingLicenseNumber: &#39;&#39;,												// 驾驶证编号
					drivingLicensePhoto: &#39;https://www.zzwlnet.com/files/images/upload_driving_license.png&#39;,							// 驾驶证图片
					drivingLicenseValidityStart: &#39;请选择证件有效期开始时间&#39;, 					// 驾驶证有效期开始
					drivingLicenseValidityEnd: &#39;请选择证件有效期结束时间&#39;,					// 驾驶证有效期结束
					drivingLicenseIssuingOrg: &#39;&#39;,											// 驾驶证发证机关
					quasiDrivingType: &#39;&#39;,													// 准驾车型
					vehicleId: &#39;&#39;,															// 关联车辆
					
					// 第三步
					roadTransportQualificationCertificateNumber: &#39;&#39;,						// 从业资格证号
					roadTransportQualificationCertificatePhoto: &#39;https://www.zzwlnet.com/files/images/upload_road_transport_qualification_certificate.png&#39;,	// 从业资格证图片
					roadTransportQualificationCertificateValidUntil: &#39;请选择证件有效期&#39;,		// 从业资格证有效期
				},
			}
		},
		methods: {
			submit: function() {
				uni.request({
					url: _self.server_host + &#39;/api&#39;,
					method: &#39;POST&#39;,
					header: {&#39;content-type&#39; : "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>

Back-end java code example

// 针对传参方式一：后台以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();
}

Recommended: "uniapp tutorial"

The above is the detailed content of A brief analysis of how to submit a form in uni-app? (code analysis). For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:csdn. If there is any infringement, please contact admin@php.cn delete
Related Article
How do you debug issues on different platforms (e.g., mobile, web)?How do you debug issues on different platforms (e.g., mobile, web)?Mar 27, 2025 pm 05:07 PM

The article discusses debugging strategies for mobile and web platforms, highlighting tools like Android Studio, Xcode, and Chrome DevTools, and techniques for consistent results across OS and performance optimization.

What debugging tools are available for UniApp development?What debugging tools are available for UniApp development?Mar 27, 2025 pm 05:05 PM

The article discusses debugging tools and best practices for UniApp development, focusing on tools like HBuilderX, WeChat Developer Tools, and Chrome DevTools.

How do you perform end-to-end testing for UniApp applications?How do you perform end-to-end testing for UniApp applications?Mar 27, 2025 pm 05:04 PM

The article discusses end-to-end testing for UniApp applications across multiple platforms. It covers defining test scenarios, choosing tools like Appium and Cypress, setting up environments, writing and running tests, analyzing results, and integrat

What are the different types of testing that you can perform in a UniApp application?What are the different types of testing that you can perform in a UniApp application?Mar 27, 2025 pm 04:59 PM

The article discusses various testing types for UniApp applications, including unit, integration, functional, UI/UX, performance, cross-platform, and security testing. It also covers ensuring cross-platform compatibility and recommends tools like Jes

What are some common performance anti-patterns in UniApp?What are some common performance anti-patterns in UniApp?Mar 27, 2025 pm 04:58 PM

The article discusses common performance anti-patterns in UniApp development, such as excessive global data use and inefficient data binding, and offers strategies to identify and mitigate these issues for better app performance.

How can you use profiling tools to identify performance bottlenecks in UniApp?How can you use profiling tools to identify performance bottlenecks in UniApp?Mar 27, 2025 pm 04:57 PM

The article discusses using profiling tools to identify and resolve performance bottlenecks in UniApp, focusing on setup, data analysis, and optimization.

How can you optimize network requests in UniApp?How can you optimize network requests in UniApp?Mar 27, 2025 pm 04:52 PM

The article discusses strategies for optimizing network requests in UniApp, focusing on reducing latency, implementing caching, and using monitoring tools to enhance application performance.

How can you optimize images for web performance in UniApp?How can you optimize images for web performance in UniApp?Mar 27, 2025 pm 04:50 PM

The article discusses optimizing images in UniApp for better web performance through compression, responsive design, lazy loading, caching, and using WebP format.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
2 weeks agoByDDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Show More

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Show More

Hot Topics

Where is the login entrance for gmail email?
7500
15
CakePHP Tutorial
1377
52
What is the format of the account name of steam
77
11
win11 activation key permanent
52
19
nyt connections hints and answers
19
52
Show More