Web应用环境下不同页面之间的传值（本文暂时只讨论 form表单数据提交）

这是我个人在尝试的多种页面传值后选择的一个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>

通过Ajax提交后台数据（相信大家这一步肯定都很熟练的）：

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

后台controller写法

@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>

这一步通常情况你需要取一部分数据进行页面展现，直接用jQuery取值即可；

至此一个完成的form表单的存取就结束了！

至于B-C页面的数据操作直接参照上述步骤就可以完成了。