快捷導(dǎo)航

Jquery easyui異步提交表單的兩種方式示例詳解

更新時(shí)間：2023年12月11日 12:01:13 作者：沐雨橙風(fēng)ιε

這篇文章分享一下easyui常用的兩種表單異步提交的方式,本文通過示例代碼給大家分享兩種方法,感興趣的朋友一起看看吧

開始前的準(zhǔn)備工作

1、使用HBuilderX創(chuàng)建一個(gè)簡單的html項(xiàng)目，刪除img和html目錄，只保留js目錄和index.html；

2、下載jquery.min.js和jquery.easyui.min.js，復(fù)制到j(luò)s目錄下；

3、修改index.html的代碼，增加一個(gè)表單，包含三個(gè)輸入框和一個(gè)提交按鈕，在頁面引入easyui的js文件；

頁面效果如下：

方式一：利用jquery ajax提交

這種方式只需要引入jquery.min.js

$.post()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui異步提交表單</title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<form id="ajax_form">
			姓名：<input id="name" />
			年齡：<input id="age" />
			手機(jī)號：<input id="phone" />
			<button type="button" id="submit">提交</button>
		</form>
		<script>
			$(function(
				$("#submit").click(function() {
					$.post("/xxx/save", {
						name: $("#name").val(),
						age: $("#age").val(),
						phone: $("#phone").val()
					}, function(resp) {
						// 處理響應(yīng)的數(shù)據(jù)
					}, "json");
				});
			));
		</script>
	</body>
</html>

$.ajax()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui異步提交表單</title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<form id="ajax_form">
			姓名：<input id="name" />
			年齡：<input id="age" />
			手機(jī)號：<input id="phone" />
			<button type="button" id="submit">提交</button>
		</form>
		<script>
			$(function(	
				$("#submit").on("click", function() {
					$.ajax({
						url: "/xxx/save",
						type: "post",
						data: {
							name: $("#name").val(),
							age: $("#age").val(),
							phone: $("#phone").val()
						},
						async: true,
						cache: false,
						dataType: "json",
						processData: true,
						success: function(resp) {
							// 處理成功的響應(yīng)
						},
						error: function(resp) {
							// 處理失敗的響應(yīng)
						}
					});
				});
			));
		</script>
	</body>
</html>

方式二：使用easyui提供的表單提交方式

easyui官網(wǎng)已經(jīng)介紹了這種方式，不過和上面的ajax提交不一樣，這種提交方式要給輸入框設(shè)置name屬性。

案例代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui異步提交表單</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.easyui.min.js"></script>
	</head>
	<body>
		<form id="ajax_form" method="post">
			姓名：<input name="name" />
			年齡：<input name="age" />
			手機(jī)號：<input name="phone" />
			<button type="submit">提交</button>
		</form>
		<script>
			let requestUrl = "/xxx/save";
			$(document).ready(function() {
				$("#ajax_form").form({
					url: requestUrl,
					success: function(resp) {
						// 處理成功的響應(yīng)
					}
				});
			});
		</script>
	</body>
</html>

到此這篇關(guān)于Jquery easyui異步提交表單的兩種方式的文章就介紹到這了,更多相關(guān)jquery easyui異步提交表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: