Jquery easyui异步提交表单的两种方式示例详解

更新时间：2023年12月11日 12:01:13 作者：沐雨橙风ιε

这篇文章分享一下easyui常用的两种表单异步提交的方式,本文通过示例代码给大家分享两种方法,感兴趣的朋友一起看看吧

开始前的准备工作

1、使用HBuilderX创建一个简单的html项目，删除img和html目录，只保留js目录和index.html；

2、下载jquery.min.js和jquery.easyui.min.js，复制到js目录下；

3、修改index.html的代码，增加一个表单，包含三个输入框和一个提交按钮，在页面引入easyui的js文件；

页面效果如下：

方式一：利用jquery ajax提交

这种方式只需要引入jquery.min.js

$.post()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui异步提交表单</title>
		<script src="http://9i0i.com/pic.php?p=js/jquery.min.js"></script>
	</head>
	<body>
		<form id="ajax_form">
			姓名：<input id="name" />
			年龄：<input id="age" />
			手机号：<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) {
						// 处理响应的数据
					}, "json");
				});
			));
		</script>
	</body>
</html>

$.ajax()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui异步提交表单</title>
		<script src="http://9i0i.com/pic.php?p=js/jquery.min.js"></script>
	</head>
	<body>
		<form id="ajax_form">
			姓名：<input id="name" />
			年龄：<input id="age" />
			手机号：<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) {
							// 处理成功的响应
						},
						error: function(resp) {
							// 处理失败的响应
						}
					});
				});
			));
		</script>
	</body>
</html>

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

easyui官网已经介绍了这种方式，不过和上面的ajax提交不一样，这种提交方式要给输入框设置name属性。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easyui异步提交表单</title>
		<script src="http://9i0i.com/pic.php?p=js/jquery.min.js"></script>
		<script src="http://9i0i.com/pic.php?p=js/jquery.easyui.min.js"></script>
	</head>
	<body>
		<form id="ajax_form" method="post">
			姓名：<input name="name" />
			年龄：<input name="age" />
			手机号：<input name="phone" />
			<button type="submit">提交</button>
		</form>
		<script>
			let requestUrl = "/xxx/save";
			$(document).ready(function() {
				$("#ajax_form").form({
					url: requestUrl,
					success: function(resp) {
						// 处理成功的响应
					}
				});
			});
		</script>
	</body>
</html>

到此这篇关于Jquery easyui异步提交表单的两种方式的文章就介绍到这了,更多相关jquery easyui异步提交表单内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

jquery实现移动端悬浮拖拽框
这篇文章主要为大家详细介绍了jquery实现移动端悬浮拖拽框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jquery下拉select控件操作方法分享(jquery操作select)
这篇文章主要介绍了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以参考下
2014-03-03
解析预加载显示图片艺术
本文主要介绍了预加载显示图片艺术实现的方法--一个jquery库的preLoadImages()函数，使用这个函数就可以轻松实现图片预加载了。需要的朋友可以看下
2016-12-12
jQuery实现点击小图片淡入淡出显示大图片特效
本文给大家分享基于jquery实现的一款图片特效，当点击小图片时会淡入淡出大图片，通过定义需要展示的图片以及图片要展示的时间，来实现这一效果，感兴趣的朋友跟着小编一起来学习吧
2015-09-09
jQuery手指滑动轮播效果
本文给大家分享一段jquery代码实现手指滑动轮播效果，代码简单易懂，非常不错，需要的朋友参考下
2016-12-12
详解jQuery中的easyui
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。这篇文章主要介绍了jQuery中的easyui ,需要的朋友可以参考下
2018-09-09
360提示[高危]使用存在漏洞的JQuery版本的解决方法
今天用360检测网站，提示高危]使用存在漏洞的JQuery版本，说是这个文件有问题jquery.min.js,这里程序员之家小编就为大家分享一下解决方法
2017-10-10
jquery自适应布局的简单实例
下面小编就为大家带来一篇jquery自适应布局的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
深入了解query和params的使用区别
这篇文章主要介绍了深入了解query和params的使用区别，路由传参的时候，有俩兄弟，一个叫query，一个叫parmas，你说他们俩长得也不像吧，可这用法实在是太类似了，下面就让我们分别从vue路由和Node接收两个角度讲他们的区别,需要的朋友可以参考下
2019-06-06
JQuery1.4+ Ajax IE8 内存泄漏问题
将JQuery1.2.6升级到JQuery1.4，有几天下班没有关闭ajax轮询网页，第二天早上来，内存耗尽，发现此内存泄漏在IE6上不存在(IE7未测试),IE8上存在
2010-10-10