JQuery的Ajax获取form表单的数据并传给后端servlet的方法

一、一个一个的接收数据，并使用 val() 赋值给变量

var username0=$("#username").val();
var password0=$("#password").val();

<script>
		$(document).ready(function() {
			$("#regionBtn").click(function () {
				var url0=$("#form1").attr("action");//获取请求后端servlet的名字
				var username0=$("#username").val();
				var password0=$("#password").val();
				alert(username0+","+password0);
				$.ajax({
					type:"post",
					url:url0,   
                //  url:"loginServlet",
					cache:false,
					data:{"username0":username0 , "password0":password0},
					dataType:"json", //是后端传回来的数据类型，不是前端传过去的数据类型
					success:function(re)
					{
						alert("ok");
					},
					error: function(re)
					{
						alert("no");
					}
				})
			})
		})

	</script>

问题来了：当form表单数据很多时，这样一个一个的取和传非常的繁琐复杂，所以以下的序列化方法解决了这一问题。

---

二、当form表单数据只是文本数据时，使用serialize()接收表单数据

var data0=$("#form1").serialize();

以前只会取一个一个的取form表单的数据，现在可以直接使用serialize()序列化把表单中的所有数据取出来组成一个串。序列化后的形式如图所示：

用户注册<br>
	<form action="regionServlet" method="POST" id="form1" >
		用户名：<input type="text" name="username" id="username"><br>
		密码：<input type="password" name="password" id="password"><br>
	</form>
	<button id="regionBtn" >注册</button>

<script>
		$(document).ready(function() {
			  $("#regionBtn").click(function () {
					var url0=$("#form1").attr("action");
					var data0=$("#form1").serialize();
					alert(data0);
					$.ajax({
						type:"post",
						url:url0,
						cache:false,
						data:data0,
						dataType:"json",
						success:function(re)
						{
							alert("ok");
						},
						error: function(re)
						{
							alert("no");
						}
					})
			  })
		})
	</script>

问题来了：当使用serialize()方法接收含有文件数据的form时，文件数据时没有被接收到的。所以使用下面的FormData来接收含有文件数据的form数据。

注意：使用serialize()时按钮放在form表单的外面。

---

三、当form表单中包含文件数据时，使用FormData接收表单数据

var data0=new FormData($("#form2")[0]);

FormData会将表单数据以键值对的形式来表示，并且还可以通过key来追加、修改、获取等操作。

用户注册<br>
	<form action="regionServlet" method="POST" id="form1" enctype="multipart/form-data">
		用户名：<input type="text" name="username" id="username"><br>
		密码：<input type="password" name="password" id="password"><br>
		头像：<input type="file" name="tx" id="tx"><br>
	</form>
	<button id="regionBtn" >注册</button>

<script>
		$(document).ready(function() {
			$("#regionBtn").click(function () {
				var url0=$("#form1").attr("action");//获取请求后端servlet的名字
				// var username0=$("#username").val();
				// var password0=$("#password").val();
				// var data0=$("#form1").serialize();//将form表单中的数据序列化为串的形式
				var data0=new FormData($("#form1")[0]);
				// alert(data0.get("username"));
				// alert(data0.get("tx"));
				$.ajax({
					type:"post",
					url:url0,
					cache:false,
					data:data0,
					processData:false,//需设置为false。因为data值是FormData对象，不需要对数据做处理
					contentType:false,//需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
					dataType:"json", //是后端传回来的数据类型，不是前端传过去的数据类型
					success:function(re)
					{
						alert("ok");
					},
					error: function(re)
					{
						alert("no");
					}
				})
			})
		})
	</script>

四、使用FormData的方法获取数据并上传到后端的servlet，并实现文件上传和保存数据到数据库

https://blog.csdn.net/weixin_45947938/article/details/124295211https://blog.csdn.net/weixin_45947938/article/details/124295211