JSP頁(yè)面代碼：
復(fù)制代碼 代碼如下:
table>
tr>
td width="400px" align="left">入學(xué)批次：SELECT NAME="grade"
id="grade" onchange="refreshEduLevelAndSpecialAjax();"> //選擇入學(xué)批次會(huì)刷新層次和專業(yè)
OPTION VALUE="0">
--請(qǐng)選擇--
c:forEach items="${gradeInfo}" var="gradeInfo">
OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}
/c:forEach>
/SELECT>/td>
td width="400px" align="left">統(tǒng)考課程：SELECT
NAME="uniExamCourseId" id="uniExamCourseId">
OPTION VALUE="0">
--請(qǐng)選擇--
c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">
OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}
/c:forEach>
/SELECT>/td>
/tr>
tr>
td colspan="2" id="refreshEduLevelAndSpecialAjax"> //設(shè)置ID，用于填充層次和專業(yè)的下拉框
table>
tr>
td width="400" align="left">層nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;次：SELECT
NAME="eduLevelId" id="eduLevelId"
onchange="refreshSpecialAjax();"> //選擇層次后刷新專業(yè)
OPTION VALUE="0">--請(qǐng)選擇--/OPTION>
c:forEach items="${educationLevel}" var="educationLevel">
OPTION VALUE="${educationLevel.id}">${educationLevel.educationLevelName}
/c:forEach>
/SELECT>/td>
td width="400" align="left" id="refreshSpecialAjax">專nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;業(yè)：SELECT //設(shè)置ID，用于填充專業(yè)的下拉框
NAME="specialId" id="specialId">
OPTION VALUE="0">--請(qǐng)選擇--/OPTION>
c:forEach items="${specialList}" var="special">
OPTION VALUE="${special.id}">${special.specialName}
/c:forEach>
/SELECT>/td>
/tr>
/table>
/td>
/tr>
/table>
JS的代碼如下：
復(fù)制代碼 代碼如下:
//JavaScript Document
var xmlHttp; //用于保存XMLHttpRequest對(duì)象的全局變量
//用于創(chuàng)建XMLHttpRequest對(duì)象
function createXmlHttp() {
//根據(jù)window.XMLHttpRequest對(duì)象是否存在使用不同的創(chuàng)建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器支持的創(chuàng)建方式
}
}
function refreshEduLevelAndSpecialAjax() {
var grade = document.getElementById("grade").value;
refreshEduLevelAndSpecial(grade);
}
function refreshEduLevelAndSpecial(grade) {
createXmlHttp(); //創(chuàng)建XMLHttpRequest對(duì)象
xmlHttp.onreadystatechange = refreshEduLevelAndSpecialElement; //設(shè)置回調(diào)函數(shù)
xmlHttp.open("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail",
true); //發(fā)送POST請(qǐng)求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade);
}
//處理服務(wù)器返回的信息 更新層次專業(yè)下拉框
function refreshEduLevelAndSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此處xmlHttp.responseText是請(qǐng)求的*Controller的某個(gè)方法返回的渲染頁(yè)面的源代碼
document.getElementById("refreshEduLevelAndSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}
function refreshSpecialAjax() {
var grade = document.getElementById("grade").value;
var eduLevelId = document.getElementById("eduLevelId").value;
refreshSpecial(grade, eduLevelId);
}
function refreshSpecial(grade, eduLevelId) {
createXmlHttp(); //創(chuàng)建XMLHttpRequest對(duì)象
xmlHttp.onreadystatechange = refreshSpecialElement; //設(shè)置回調(diào)函數(shù)
xmlHttp.open("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail",
true); //發(fā)送POST請(qǐng)求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade + "eduLevelId=" + eduLevelId);
}
//處理服務(wù)器返回的信息 更新專業(yè)下拉框
function refreshSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此處xmlHttp.responseText是請(qǐng)求的*Controller的某個(gè)方法返回的渲染頁(yè)面的源代碼
document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}
Controller代碼：
復(fù)制代碼 代碼如下:
@RequestMapping(value = "/eduLevelAndSpecialByGradeNameInSpecialDetail")
public ModelAndView getEduLevelAndSpecialByGradeNameInSpecialDetail(HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eduLevelId=request.getParameter("eduLevelId");
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eduLevelId==null||eduLevelId.equals("0")){
eduLevelId="null";
}
ArrayListUtilObject> eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName);
ArrayListUtilObject> specialIdList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
mav.addObject("educationLevel", eduLevelList);
mav.addObject("specialList", specialIdList);
mav.setViewName("scoreManage/uniExamScore/eduLevelAndSpecialAjax");
return mav;
}
@RequestMapping(value = "/specialByGradeNameAndEduLevelIdInSpecialDetail", method = RequestMethod.POST)
public ModelAndView getSpecialByGradeNameAndEduLevelIdInSpecialDetail(HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eduLevelId=request.getParameter("eduLevelId");
System.out.println("grade:"+gradeName+" eduLevelId:"+eduLevelId);
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eduLevelId==null||eduLevelId.equals("0")){
eduLevelId="null";
}
ArrayListUtilObject> specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
mav.addObject("specialList", specialList);
mav.setViewName("scoreManage/uniExamScore/specialAjax");
return mav;
}
后臺(tái)代碼沒(méi)有給出來(lái)，但應(yīng)該看得懂，就是獲取后臺(tái)數(shù)據(jù)傳到eduLevelAndSpecialAjax.jsp和specialAjax.jsp頁(yè)面。這兩個(gè)頁(yè)面用于填充原頁(yè)面，通過(guò)ID來(lái)填充相應(yīng)區(qū)域，兩個(gè)頁(yè)面代碼如下。
eduLevelAndSpecialAjax.jsp輔助頁(yè)面：
復(fù)制代碼 代碼如下:
td id="refreshEduLevelAndSpecialAjax"> //ID用于填充原頁(yè)面
table>
tr>
td width="400px" align="left">層nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;次：select
id="eduLevelId" name="eduLevelId" onchange="refreshSpecialAjax();">
option value="0">--請(qǐng)選擇--/option>
c:forEach items="${educationLevel}" var="educationLevel">
option value="${educationLevel.id}">${educationLevel.name}/option>
/c:forEach>
/select>/td>
td width="400px" align="left" id="refreshSpecialAjax">專nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;業(yè)：SELECT //ID用于填充原頁(yè)面
NAME="specialId" id="specialId">
option value="0">--請(qǐng)選擇--/option>
c:forEach items="${specialList}" var="special">
OPTION VALUE="${special.id}">${special.name}
/c:forEach>
/SELECT>/td>
/tr>
/table>
/td>
specialAjax.jsp輔助頁(yè)面：
復(fù)制代碼 代碼如下:
td width="400" align="left" id="refreshSpecialAjax">專nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;業(yè)：SELECT
NAME="specialId" id="specialId"> //ID用于填充原頁(yè)面
option value="0">--請(qǐng)選擇--/option>
c:forEach items="${specialList}" var="special">
OPTION VALUE="${special.id}">${special.name}
/c:forEach>
/SELECT>/td>
這樣就在JSP頁(yè)面實(shí)現(xiàn)了填充。
