页面间传送多个参数 _Web前端

页面间传递多个参数

问题描述：

有多个页面，(1)选择课程-->(2)选择班级-->(3)选择考试-->(4)选择试卷-->(5)处理选择结果

每一步都向下一个页面传递一个参数，

要求每个页面都有上一步、下一步按钮(第一个页面和最后一个页面除外)

并且点击上一步时，能把先前选择的结果保留

------------------------------------------------------

解决方法：

后台用的是struts2框架

后台代码如下：

package demo.action;

import com.opensymphony.xwork2.ActionSupport;

public class SelectAction extends ActionSupport {
	/**
	 * 课程名称
	 */
	private String courseName;

	/**
	 * 年级
	 */
	private String grade;
	/**
	 * 班级
	 */
	private String classNo;

	/**
	 * 考试
	 */
	private String examId;

	/**
	 * 试卷
	 */
	private String paperId;

	/**
	 * step 1 选择课程
	 * 
	 * @return
	 */
	public String selectCourse() {
		return "success";
	}

	/**
	 * step 2 选择班级
	 * 
	 * @return
	 */
	public String selectClass() {
		return "success";
	}

	/**
	 * step 3 选择考试
	 * 
	 * @return
	 */
	public String selectExam() {
		return "success";
	}

	/**
	 * step 4 选择试卷
	 * 
	 * @return
	 */
	public String selectPaper() {
		return "success";
	}

	/**
	 * step 5 处理选择结果
	 * 
	 * @return
	 */
	public String selectResult() {
		return "success";
	}
        // get/set方法省略
}

struts.xml中的action配置如下：

<action name="select*" class="demo.action.SelectAction" method="select{1}">
			<result name="success">/jsp/select/select{1}.jsp</result>
		</action>

5个jsp页面如下：

selectCourse.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<script type="text/javascript">
		function toPage(href) {
			document.forms[0].action = href;
			document.forms[0].submit();
		}
	</script>
  </head>
  
  <body>
	<div>选择课程-->选择班级-->选择考试-->选择试卷</div>
	<div>
		(${courseName })-->(${grade }--${classNo })-->(${examId })-->(${paperId })
	</div>
    <h3>选择课程</h3>
    <form action="selectClass.action">
	    courseName: <input type="text" name="courseName" value="${courseName }"/><br/>
	    <input type="reset" value="重置"/> &nbsp;&nbsp;
	    <input type="submit" value="下一步"/>
    </form>
  </body>
</html>

? selectClass.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<script type="text/javascript">
		function toPage(href) {
			document.forms[0].action = href;
			document.forms[0].submit();
		}
	</script>
  </head>
  
  <body>
	<div>选择课程-->选择班级-->选择考试-->选择试卷</div>
	<div>
		(${courseName })-->(${grade }--${classNo })-->(${examId })-->(${paperId })
	</div>
    <h3>选择班级</h3>
    <form action="selectExam.action">
    	<input type="hidden" name="courseName" value="${courseName }"/>
	    grade: <input type="text" name="grade" value="${grade }"/><br/>
	    classNo: <input type="text" name="classNo" value="${classNo }"/><br/>
	    <input type="button" onclick="toPage('selectCourse.action');" value="上一步"/>&nbsp;&nbsp;
	    <input type="submit" value="下一步"/>
    </form>
  </body>
</html>

? selectExam.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<script type="text/javascript">
		function toPage(href) {
			document.forms[0].action = href;
			document.forms[0].submit();
		}
	</script>
  </head>
  
  <body>
	<div>选择课程-->选择班级-->选择考试-->选择试卷</div>
	<div>
		(${courseName })-->(${grade }--${classNo })-->(${examId })-->(${paperId })
	</div>
    <h3>选择考试</h3>
    <form action="selectPaper.action">
    	<input type="hidden" name="courseName" value="${courseName }"/>
    	<input type="hidden" name="grade" value="${grade }"/>
    	<input type="hidden" name="classNo" value="${classNo }"/>
	    examId: <input type="text" name="examId"/><br/>
	    <input type="button" onclick="toPage('selectClass.action');" value="上一步"/>&nbsp;&nbsp;
		<input type="submit" value="下一步"/>
    </form>
  </body>
</html>

? selectPaper.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<script type="text/javascript">
		function toPage(href) {
			document.forms[0].action = href;
			document.forms[0].submit();
		}
	</script>
  </head>
  
  <body>
	<div>选择课程-->选择班级-->选择考试-->选择试卷</div>
	<div>
		(${courseName })-->(${grade }--${classNo })-->(${examId })-->(${paperId })
	</div>
    <h3>选择试卷</h3>
    <form action="selectResult.action">
    	<input type="hidden" name="courseName" value="${courseName }"/>
    	<input type="hidden" name="grade" value="${grade }"/>
    	<input type="hidden" name="classNo" value="${classNo }"/>
    	<input type="hidden" name="examId" value="${examId }"/>
    	paperId: <input type="text" name="paperId" value="${paperId }"/><br/>
    	<input type="button" onclick="toPage('selectExam.action');" value="上一步"/>&nbsp;&nbsp;
    	<input type="submit" value="下一步"/>
    </form>
  </body>
</html>

? selectResult.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<script type="text/javascript">
		function toPage(href) {
			document.forms[0].action = href;
			document.forms[0].submit();
		}
	</script>
  </head>
  
  <body>
	<div>选择课程-->选择班级-->选择考试-->选择试卷</div>
	<div>
		(${courseName })-->(${grade }--${classNo })-->(${examId })-->(${paperId })
	</div>
    <h3>选择结果</h3>
    <form action="">
    	<input type="hidden" name="courseName" value="${courseName }"/>
    	<input type="hidden" name="grade" value="${grade }"/>
    	<input type="hidden" name="classNo" value="${classNo }"/>
    	<input type="hidden" name="examId" value="${examId }"/>
    	<input type="hidden" name="paperId" value="${paperId }"/>
    	<input type="button" onclick="toPage('selectPaper.action');" value="上一步"/>
    </form>
  </body>
</html>

------------------------------------------------------

总结：

1.对js不熟

document.forms[0].action='dddddd'可对form进行修改、提交等操作

2.隐藏域的灵活应用

------------------------------------------------------