這是我個人在嘗試的多種頁面傳值後選擇的一個form表單傳值的需求。

一、需求背景：

本次開發遇到的是一個H5頁面分別為3個層次頁面，頁面A為資料輸出頁面，頁面B為資料確認頁面，頁面C為注意事項確認及最終確認申請頁面。

二、流程分析：

本人比較笨，所以直接用ProcessOn畫的流程圖直接展示！

三：實際操作

由於在該應用開發過程中中資料緩的儲存限制，現採用如下方法用於資料在頁面之間的傳輸。

1.獲取A頁面中的from表單資料，並通過後臺提交第一步校驗：

form表單(僅作為事例)：

<form action="" id="form">
    <input type="XXX" name="a" id="a"/>
    <input type="XXX" name="b" id="b""/>
    <input type="XXX" name="c" id="c"/>
    <input type="XXX" name="d" id="d"/>
</form>
 

	function a() {
		var param = $("#from").serialize();
		$.ajax({
			dataType:'json',
			url : 'b.do',
			data : param,
			type : 'POST',
			success : function(data) {
				showLoader("提交成功！");
			},
			error : function() {
				showLoader("提交失敗！");
			}
		});

@RequestMapping("/b.do")
public String toBorrowWorthConfirm(HttpServletRequest request,
		HttpServletResponse response, Model model) {
	//取出request中的資料，並儲存至Model中，最後通過response返回至B頁面
	model.addAttribute("a", request.getParameter("a"));
	model.addAttribute("b", request.getParameter("b"));
	model.addAttribute("c", request.getParameter("c"));
	model.addAttribute("d", request.getParameter("d"));
	return "b";
}
 

2.在B頁面中新增表單將後臺response傳輸過來的資料獲取：為了不破壞前端的樣式，通常情況下采用 ‘hidden’樣式；

<form action="" id="form">
    <input type="hidden" name="a" id="a"/>
    <input type="hidden" name="b" id="b""/>
    <input type="hidden" name="c" id="c"/>
    <input type="hidden" name="d" id="d"/>
</form>
 

至此一個完成的form表單的存取就結束了！

至於B-C頁面的資料操作直接參照上述步驟就可以完成了。