Do query page, query conditions are more often related to cascading. To take a simple example, the academic system, we have to inquire about the teaching plan information, the query conditions are the admission batch, student level (special promotion, higher professional), specialty, curriculum.
What is the cascading relationship between them? The enrollment batch affects the student level (a certain enrollment batch may only be a post-secondary or elevated student level), a professional, a course, a student level that affects the profession, the curriculum, the profession and the course. In other words, when the admission batch is selected, the student level, the Professional and the Drop-down box of the course will be refreshed locally, when the student level is selected, the Professional and the Drop-down box of the course will be refreshed locally, and the Drop-down box of the course will be refreshed locally when choosing a major.
We certainly do not want the actions that have been selected to be initialized with the refresh of the page, and then the related dropdown box is partially refreshed after the previous mention of selecting one. It's easy to think of cascading with a page-filling approach.
The author's Fill method is by submitting JS, obtains the data by the controller, passes the data to the auxiliary JSP page, and then uses the callback function to fill in the auxiliary JSP page the data to the corresponding Drop-down box. said the abstract, directly on the code, the level four cascade slightly more trouble, know the principle is also good to do, the author of the three-level cascade code. cascading styles are shown below:
JSP page code:
Copy Code code as follows:
<table>
<tr>
<TD width= "400px" align= "left" > Admission batch: <select name= "Grade"
Id= "Grade" Onchange= "Refreshedulevelandspecialajax ();" >//Select admission Batches will refresh levels and majors
<option value= "0" >
--Please select-
<c:foreach items= "${gradeinfo}" var= "Gradeinfo" >
<option value= "${gradeinfo.gradename}" >${gradeinfo.gradename}
</c:forEach>
</SELECT></td>
<TD width= "400px" align= "Left" > Exam course: <select
Name= "Uniexamcourseid" id= "Uniexamcourseid" >
<option value= "0" >
--Please select-
<c:foreach items= "${unifiedexamcourselist}" var= "Uniexamcourse" >
<option value= "${uniexamcourse.id}" >${uniexamcourse.uniexamcoursename}
</c:forEach>
</SELECT></td>
</tr>
<tr>
<TD colspan= "2" id= "Refreshedulevelandspecialajax" >//Set ID, for filling levels and professional dropdown boxes
<table>
<tr>
<TD width= "align=" "Left" > Level: <select
Name= "Edulevelid" id= "Edulevelid"
Onchange= "Refreshspecialajax ();" >//Select level after Refresh Professional
<option value= "0" >--Please select--</option>
<c:foreach items= "${educationlevel}" var= "Educationlevel" >
<option value= "${educationlevel.id}" >${educationlevel.educationlevelname}
</c:forEach>
</SELECT></td>
<TD width= "align=" "left" id= "Refreshspecialajax" > Professional: <select//Set ID, used to populate the Professional dropdown box
Name= "Specialid" id= "Specialid" >
<option value= "0" >--Please select--</option>
<c:foreach items= "${speciallist}" var= "Special" >
<option value= "${special.id}" >${special.specialname}
</c:forEach>
</SELECT></td>
</tr>
</table>
</td>
</tr>
</table>
JS code is as follows:
Copy Code code as follows:
JavaScript Document
var xmlHttp; global variable for saving the XMLHttpRequest object
Used to create a XMLHttpRequest object
function Createxmlhttp () {
According to window. Whether the XMLHttpRequest object exists using a different creation method
if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest (); Firefox, Opera and other browsers support the creation of the way
} else {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");//ie browser-supported creation
}
}
function Refreshedulevelandspecialajax () {
var grade = document.getElementById ("Grade"). Value;
Refreshedulevelandspecial (grade);
}
function Refreshedulevelandspecial (grade) {
Createxmlhttp (); Creating XMLHttpRequest Objects
Xmlhttp.onreadystatechange = refreshedulevelandspecialelement; Set callback function
Xmlhttp.open ("POST", "Edulevelandspecialbygradenameinspecialdetail",
true); Send POST request
Xmlhttp.setrequestheader ("Content-type",
"application/x-www-form-urlencoded");
Xmlhttp.send ("grade=" + grade);
}
Processing server returned information update hierarchy Professional dropdown box
function Refreshedulevelandspecialelement () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Here Xmlhttp.responsetext is the source code for the rendered page returned by a method of the requested *controller
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 (); Creating XMLHttpRequest Objects
Xmlhttp.onreadystatechange = refreshspecialelement; Set callback function
Xmlhttp.open ("POST", "Specialbygradenameandedulevelidinspecialdetail",
true); Send POST request
Xmlhttp.setrequestheader ("Content-type",
"application/x-www-form-urlencoded");
Xmlhttp.send ("grade=" + Grade + "&edulevelid=" + edulevelid);
}
Processing server returned Information Update Professional dropdown box
function Refreshspecialelement () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
Here Xmlhttp.responsetext is the source code for the rendered page returned by a method of the requested *controller
document.getElementById ("Refreshspecialajax"). InnerHTML = Xmlhttp.responsetext;
}
}
}
Controller code:
Copy Code code as follows:
@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";
}
Arraylist<utilobject> Edulevellist=uess.getedulevelidbygradenameinspecialdetail (gradeName);
Arraylist<utilobject> 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";
}
Arraylist<utilobject> Speciallist=uess.getspecialidbygradenameandedulevelidinspecialdetail (GradeName, Edulevelid);
Mav.addobject ("Speciallist", speciallist);
Mav.setviewname ("Scoremanage/uniexamscore/specialajax");
return MAV;
}
Background code does not give out, but should understand, is to get the background data to edulevelandspecialajax.jsp and specialajax.jsp page. These two pages are used to populate the original page, with the ID to populate the corresponding area, two page code as follows.
edulevelandspecialajax.jsp Secondary page:
Copy Code code as follows:
<TD id= "Refreshedulevelandspecialajax" >//id used to populate the original page
<table>
<tr>
<TD width= "400px" align= "Left" > Level: <select
Id= "Edulevelid" name= "Edulevelid" onchange= "Refreshspecialajax ();" >
<option value= "0" >--Please select--</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" > Specialty: <select//id for filling the original Page
Name= "Specialid" id= "Specialid" >
<option value= "0" >--Please select--</option>
<c:foreach items= "${speciallist}" var= "Special" >
<option value= "${special.id}" >${special.name}
</c:forEach>
</SELECT></td>
</tr>
</table>
</td>
specialajax.jsp Secondary page:
Copy Code code as follows:
<TD width= "align=" "left" id= "Refreshspecialajax" > Specialty: <select
Name= "Specialid" id= "Specialid" >//id used to populate the original page
<option value= "0" >--Please select--</option>
<c:foreach items= "${speciallist}" var= "Special" >
<option value= "${special.id}" >${special.name}
</c:forEach>
</SELECT></td>
This enables the fill on the JSP page.
