一、serialize() 方法
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中，这样在ajax提交表单数据时，就不用一一列举每一个参数，只需将data参数设置为：$("form").serialize()即可。
//语法
$(selector).serialize()
输出标准的查询字符串：a=1&b=2&c=3&d=4&e=5
注释：只会将“成功的控件”序列化为字符串。（即指没被禁用的元素）如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。
- HTML页面
<head>
<title>添加管理员</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
</head>
<body>
<form id="adminForm" method="post" >
<input type="text" name="adminName" id="adminName" ><br>
<input type="password" name="password" id="password"><br>
<input type="submit" value="添加管理员" onclick="save()">
</form>
<script language="JavaScript">
function save() {
$.post("/admin/admin", $('#adminForm').serialize(), function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
}
</script>
- Servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//输入，请求乱码
request.setCharacterEncoding("utf-8");
//输出 响应 乱码
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");
String adminName = request.getParameter("adminName");
String password = request.getParameter("password");
Admin admin = new Admin();
admin.setAdminName(adminName);
admin.setPassword(password);
AdminService adminService = new AdminServiceImpl();
PrintWriter writer = response.getWriter();
if (adminService.register(admin)) {
writer.print("成功");
} else {
writer.print("失败");
}
}
二、serializeObject()方法
- 自定义方法
//给jQuery添加一个方法
jQuery.fn.serializeObject = function () {
var formData = {};
var formArray = this.serializeArray();
for(var i = 0, n = formArray.length; i < n; ++i){
formData[formArray[i].name] = formArray[i].value;
}
return formData;
};
把form表单的值序列化成一个json对象，如{username：admin，password：admin123}
- HTML
<head>
<title>添加管理员</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
</head>
<body>
<form id="adminForm" method="post" >
<input type="text" name="adminName" id="adminName" ><br>
<input type="password" name="password" id="password"><br>
<input type="submit" value="添加管理员" onclick="save()">
</form>
<script language="JavaScript">
// 自定义方法
jQuery.fn.serializeObject = function () {
var formData = {};
var formArray = this.serializeArray();
for(var i = 0, n = formArray.length; i < n; ++i){
formData[formArray[i].name] = formArray[i].value;
}
return formData;
};
function save() {
$.post("/admin/admin", JSON.stringify($('#adminForm').serializeObject()), function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
});
}
</script>
</body>
- Servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//输入，请求乱码
request.setCharacterEncoding("utf-8");
//输出 响应 乱码
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("utf-8");
// 读取请求内容
BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream(),"utf-8"));
String line = null;
StringBuilder sb = new StringBuilder();
while ((line = br.readLine()) != null) {
sb.append(line);
}
//将json字符串转换为json对象
JSONObject json=JSONObject.parseObject(sb.toString());
Admin admin=json.toJavaObject(Admin.class);
System.out.print(admin.getAdminName());
}
三、serializeArray() 方法
serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。
//格式：
var jsonData = $("form").serializeArray();
注意：此方法返回的是 JSON 对象而非 JSON 字符串。
返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]
特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
注意：1、不被禁用；2、包含name属性
四、 JSON.parse()
将字符串解析成Json对象
五、 JSON.stringify()
将Json对象解析成字符串
