這裏總結下form表單的二種常見的提交方式，所用的模塊爲前端jquery+thymeleaf; 後臺Springboot。
第一種：提交跳轉型：
顧名思義，form一旦submit，默認提交表單並跳轉
thymeleaf頁面：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Form</h1>
<form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
<p>Id: <input type="text" th:field="*{id}" /></p>
<p>Message: <input type="text" th:field="*{content}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</body>
</html>上邊注意的是：
th:action是跳轉的url；
th:object是後臺封裝的form對象
點擊submit後，後臺是這個樣子的：
1、封裝的form對象
package hello;
public class Greeting {
private long id;
private String content;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}2、controller
package hello;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class GreetingController {
//客戶get請求一個form頁面時，返回的model裏有一個空Greeting實例，去binding頁面的th:object，沒有bingding則報錯
@GetMapping("/greeting")
public String greetingForm(Model model) {
model.addAttribute("greeting", new Greeting());
return "greeting"; //返回表單輸入頁
}
//form提交映射到此處，@ModelAttribute映射頁面的th:object，從而將form捕獲並封裝成Greeting對象
@PostMapping("/greeting")
public String greetingSubmit(@ModelAttribute Greeting greeting) {
return "result"; //提交表單後跳轉的頁面
}
}第二種：ajax異步提交form表單，前端控制下一步走向型
這種是我常用的，因爲我的需求有時候需要提交一個form但並非跳轉頁面，而是根據後臺返回的消息去決定下一步。這種我用的ajax異步處理
前端thymeleaf頁面form部分：
這裏我把需要提交的數據寫在了form下的一個table裏（因爲我要展示這些數據，同時還可以以form的形式提交），這裏我把需要提交的數據映射到了updatePoints對象，該對象在後臺是這個樣子：
注意，Form對應PointForm，Form裏的updatePoints對應對象的updatePoints
package com.cloudhealth.ecommerce.entity;
import java.util.List;
public class PointForm {
private List<EcommerceNonDetailOrder> updatePoints;
public List<EcommerceNonDetailOrder> getUpdatePoints() {
return updatePoints;
}
public void setUpdatePoints(List<EcommerceNonDetailOrder> updatePoints) {
this.updatePoints = updatePoints;
}
}updatePoints是一個泛型list，list裏的對象爲EcommerceNonDetailOrder，
package com.cloudhealth.ecommerce.entity;
import java.io.Serializable;
import java.util.Date;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class EcommerceNonDetailOrder implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private int id;
private Long phone;
private String inviteCode;
private int auditFlag; //0--未審覈，1--審覈不通過，2--審覈通過
private String time;
@Id
@GeneratedValue(strategy= GenerationType.AUTO)
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public Long getPhone() {
return phone;
}
public void setPhone(Long phone) {
this.phone = phone;
}
public String getInviteCode() {
return inviteCode;
}
public void setInviteCode(String inviteCode) {
this.inviteCode = inviteCode;
}
public int getAuditFlag() {
return auditFlag;
}
public void setAuditFlag(int auditFlag) {
this.auditFlag = auditFlag;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
}
ok，Form和後臺Form對象映射起來後，我需要考慮如何將Form提交到後臺而且不跳轉，因爲頁面裏沒有binding，這裏就不能用@ModelAtrribute去捕獲form表單了。
首先表單提交放到ajax裏去完成：
1、
$(document).on("click", "#submit", function(e) {
e.preventDefault();
x = $('form').serializeArray();
$.post('batchUpdate',x,function(msg) {
alert(msg);
})
});這裏注意的是將form序列化，serializeArray()是關鍵。並將表單post到batchUpdate url下。下邊來看下後臺如何捕獲
2、
@RequestMapping(value={"/batchUpdate"}, method=RequestMethod.POST)
public @ResponseBody String update(PointForm updatePoints) {
String callback = updateOps.batchUpdate(updatePoints);
return callback;
}很簡單了，直接在方法參數裏命名一個PointForm，這樣提交過來的Form就會封裝到這個對象中了
這裏前端form的序列化和後臺的捕獲是關鍵
over