コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > uni-app > uni-app でフォームを送信する方法について簡単に分析しますか? (コード解析)

uni-app でフォームを送信する方法について簡単に分析しますか? (コード解析)

青灯夜游
リリース： 2022-02-10 19:09:44
転載
7108 人が閲覧しました

ユニアプリでフォームを送信するにはどうすればよいですか?次の記事では、uni-app でフォームを送信する 2 つの方法を紹介します。

uni-app でフォームを送信する方法について簡単に分析しますか? (コード解析)

#ユニアプリがフォームを送信する 2 つの方法

方法 1: フォームのフォーム要素より小さい より小さい

たとえば、以下に示すようにユーザー ログインが可能です

uni-app でフォームを送信する方法について簡単に分析しますか? (コード解析)

フロントエンド コードの例

これはいくつかの冗長なコードが省略されています 

<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>
ログイン後にコピー

バックエンド コードの例

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

/**
* 也可以按照字段名来接收
*/
@PostMapping("/password")
public Result loginByPassword(String username, String passsword) {
	// 处理业务逻辑
}
ログイン後にコピー

#方法 1: フォーム要素が多い

フォーム要素が多い場合、上記の方法は処理がより面倒になります。一般に、新しいユーザーや製品の追加などのフォーム フォームは、十数から数十、個人。


uni-app でフォームを送信する方法について簡単に分析しますか? (コード解析) 上記のような書き方をすると、フロントエンドが面倒で見苦しいだけでなく、バ​​ックグラウンド受信もフィールド単位で受信する必要があります。 , オブジェクト
formData を定義し、データをその中に保存し、送信時に JSON 文字列をバックエンドに直接送信できます。バックエンドは JSON 文字列を受信して​​ JSON オブジェクトに変換し、独自の処理を実行します。ビジネス ロジック処理

フロントエンド コード例: 

<!-- 表单元素核心区域 -->
<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>
ログイン後にコピー

バックエンド 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 でフォームを送信する方法について簡単に分析しますか? (コード解析)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
uniapp フォームの送信
ソース：csdn.net
前の記事：知っておくべきUniAPPの入門知識をまとめました。 次の記事：uni-app の簡単な紹介を要約して共有する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2160
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2310
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1947
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1821
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1875
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート