表单序列化

最新推荐文章于 2022-06-08 15:33:08 发布

域海

最新推荐文章于 2022-06-08 15:33:08 发布

阅读量330

点赞数

分类专栏： Java 文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/weixin_45048966/article/details/119902876

版权

Java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="login-form">
			<p>
				用户名：<input type="text" name="userName" />
			</p>
			<p>
				密码：<input type="password" name="pwd" />
			</p>
			<p>
				还有很多其它的表单项……
			</p>
			<!--
				如果要使用Ajax操作提交表单
				而不是使用默认提交行为，则将原来的提交按钮改为普通按钮，
				然后在按钮的事件处理函数中编写Ajax提交的逻辑
			-->
			<button type="button" id="submit">提交</button>
		</form>
	</body>
	<script type="text/javascript" src="js/jquery1.9.1.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script>
		$("#submit").on("click",function(){
			//TODO:校验
			
			$.ajax({
				type:"post",
				url:serverPath+"/test",
				//1.逐个获取表单项元素的值，对于表单元素较多时会很麻烦
				// {
				// 	userName:$("input[name=userName]").val(),
				// 	pwd:$("input[name=pwd]").val(),
				// 	//……
				// }
				
				//2.对于表单而言，如果想要一次性获取其中的每一个表单项数据并作为请求参数
				//可以使用表单序列化的方式来一次性得到所有的表单数据
				//格式：serName=Tom&pwd=123
				data:$("#login-form").serialize()
				
			});
		});
	</script>
</html>

域海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单序列化

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form id="login-form"> <p> 用户名：<input type="text" name="userName" /> </p> &lt.
复制链接

扫一扫