Ajax two-level linkage menu implementation principle and code

Time:2021-10-22

index.jsp:

Copy codeThe code is as follows:
<%@ page language=”java” pageEncoding=”UTF-8″%>
<html>
<head>
< title > secondary menu linkage demonstration < / Title >
<script type=”text/javascript”>
var req;
window.onload=function()
{/ / function during page loading
}
function Change_ Select() {/ / this function is called when the options of the first drop-down box change
var province = document.getElementById(‘province’).value;
var url = “select?id=”+ escape(province);
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject(“Microsoft.XMLHTTP”);
}
if(req){
req.open(“GET”,url,true);
//Specifies that the callback function is callback
req.onreadystatechange = callback;
req.send(null);
}
}
//Callback function
function callback(){
if(req.readyState ==4){
if(req.status ==200){
parseMessage();// Parsing XML documents
}else{
Alert (“unable to get Description:” + req. Statustext);
}
}
}
//Method for parsing returned XML
function parseMessage(){
var xmlDoc = req.responseXML.documentElement;// Get the returned XML document
var xSel = xmlDoc.getElementsByTagName(‘select’);
//Get all < Select > tags in the XML document
var select_root = document.getElementById(‘city’);
//Get the second drop-down box in the web page
select_root.options.length=0;
//Each time you get new data, clear the length of each two drop-down frames to 0
for(var i=0;i<xSel.length;i++){
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
//Get the value of the first tag in each < Select > tag, that is, the value of the < value > tag
var xText = xSel[i].childNodes[1].firstChild.nodeValue;
//Get the value of the second tag in each < Select > tag, that is, the value of the < text > tag
var option = new Option(xText, xValue);
//Create an option object based on the values of each set of value and text tags
try{
select_ root.add(option);// Add the option object to the second drop-down box
}catch(e){
}
}
}
</script>
</head>
<body>
<div align=”center”>
<form name=”form1″ method=”post” action=””>
<table width=”70%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center”>
Example of secondary linkage
</td>
</tr>
<tr>
<td>
<select name=”province” onChange=”Change_Select()”>
<!– First drop-down menu — >
<option value=”0″>
Please select
</option>
<option value=”1″>
Beijing
</option>
<option value=”2″>
Tianjin
</option>
<option value=”3″>
Shandong
</option>
</select>
<select name=”city”>
<!– Second drop-down menu — >
<option value=”0″>
Please select
</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<tr>
</table>
</form>
</div>
</body>
</html>

SelectServlet:

Copy codeThe code is as follows:
package com;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/***
*
* @author zdw
*
*/
public class SelectServlet extends HttpServlet
{
private static final long serialVersionUID = 1L;
public SelectServlet()
{
super();
}
public void destroy()
{
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
// response.setCharacterEncoding(“GBK”);
response.setContentType(“text/xml”);
response.setHeader(“Cache-Control”, “no-cache”);
request.setCharacterEncoding(“GBK”);
response.setCharacterEncoding(“UTF-8”);
String targetId = request.getParameter(“id”).toString();
System.out.println(targetId);
//Get the value of parameter ID in the request
String xml_start = “<selects>”;
String xml_end = “</selects>”;
String xml = “”;
if (targetId.equalsIgnoreCase(“0”))
{
XML = “< Select > < value > 0 < / value > < text > please select < / text > < / Select >”;
} else if (targetId.equalsIgnoreCase(“1”))
{
XML = “< Select > < value > 1 < / value > < text > Changping < / text > < / Select >”;
XML + = “< Select > < value > 2 < / value > < text > Fengtai < / text > < / Select >”;
XML + = “< Select > < value > 3 < / value > < text > Haidian < / text > < / Select >”;
XML + = “< Select > < value > 4 < / value > < text > Chaoyang < / text > < / Select >”;
} else if (targetId.equalsIgnoreCase(“2”))
{
XML = “< Select > < value > 1 < / value > < text > Tanggu District < / text > < / Select >”;
XML + = “< Select > < value > 2 < / value > < text > Hangu District < / text > < / Select >”;
XML + = “< Select > < value > 3 < / value > < text > Dagang District < / text > < / Select >”;
XML + = “< Select > < value > 4 < / value > < text > Dongli District < / text > < / Select >”;
} else
{/ / if it is 3, the following characters are returned
XML = “< Select > < value > 1 < / value > < text > Jinan < / text > < / Select >”;
XML + = “< Select > < value > 2 < / value > < text > Qingdao < / text > < / Select >”;
XML + = “< Select > < value > 3 < / value > < text > Zibo < / text > < / Select >”;
XML + = “< Select > < value > 4 < / value > < text > Zaozhuang < / text > < / Select >”;
}
String last_xml = xml_start + xml + xml_end;
response.getWriter().write(last_xml);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doGet(request, response);
}
public void init() throws ServletException
{
}
}

web.xml:

Copy codeThe code is as follows:
<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app version=”2.4″ xmlns=”http://java.sun.com/xml/ns/j2ee”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd”>
<servlet>
<servlet-name>SelectServlet</servlet-name>
<servlet-class>com.SelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectServlet</servlet-name>
<url-pattern>/select</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>