form表單序列化以後追加字段

在須要提交表單的模塊，咱們每每須要用到序列化表單並經過ajax實現交互。若是趕上特殊的需求，在表單的數據以外，還須要傳送一些比較重要的字段，或數據，咱們能夠採起下列方法：javascript

var data = $.param({'state': state}) + '&' + $('#desProForm').serialize();

完整代碼：html

頁面：java

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../JQuery/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#submitButton").click(function(){
			var data = $.param({"id":"1"}) + "&" + $("#testForm").serialize() + "";
			$.ajax({
				type:"POST",
				data:data,
				url:"${pageContext.request.contextPath }/Test/saveUser.do",
				success:function(data){
					console.log(data);
				}
			});
		});
	});
	
	
</script>
<title>Insert title here</title>
</head>
<body>
<form id="testForm">
<table>
	<tr>
		<td><label for="userName">用戶名:</label></td>
		<td><input id="userName" name="userName" type="text"></td>
	</tr>
	<tr>
		<td><label for="password">密碼：</label></td>
		<td><input id="password" name="password" type="password"></td>
	</tr>
	<tr>
		<td> </td>
		<td><input id="submitButton" type="button" value="提交"></td>
	</tr>
</table>
	
</form>
</body>
</html>

效果：jquery

後臺：ajax

@RequestMapping("saveUser.do")
public ResponseEntity<Map<String,Object>> saveUser(String id, User user){
	ap<String,Object> map = new HashMap<String,Object>();
	System.out.println(id + " " + user);
	map.put("status", "success");
	return new ResponseEntity<Map<String,Object>>(map,HttpStatus.OK);
}

效果：app

Reference：ui

[1] 大園子, form表單序列化以後追加字段, https://www.cnblogs.com/eoooxy/p/6341609.htmlurl