ajax做省市联动

原理：#

　当select.jsp页面打开时，向服务器发送异步请求，得到所有省份的名称（文本数据）。然后使用每个省份名称创建<option>，添加到<select name=”province”>中。

　　并且为<select name=”province”>元素添加onchange事件监听。当选择的省份发生变化时，再向服务器发送异常请求，得到当前选中的省份下所有城市（XML数据）。然后客户端解析XML文档，使用每个城市名称创建<option>，添加到<select name=”city”>元素中。

 

代码实现：#

前端页面

Web04\WebContent\ajax\select.jsp

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax5.jsp' starting page</title>
     
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript">
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多数浏览器
    } catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 
            } catch (e) {
                alert("浏览器不支持");
                throw e;
            }
        }
    }
}
/*
 * 1. 在文档加载完毕时发送请求，得到所有省份名称，显示在<select name="province"/>中
 * 2. 在选择了新的省份时，发送请求（参数为省名称），得到xml文档，即<province>元素
 *   解析xml文档，得到其中所有的<city>，再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city">元素中
 */
 
window.onload = function() {
    /*
    ajax四步，请求ProvinceServlet，得到所有省份名称
    使用每个省份名称创建一个<option>元素，添加到<select name="province">中
    */
    var xmlHttp = createXMLHttpRequest();
    xmlHttp.open("GET", "/Web04/ProvinceServlet", true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            // 获取服务器的响应
            var text = xmlHttp.responseText;
            // 使用逗号分隔它，得到数组
            var arr = text.split(",");
            // 循环遍历每个省份名称，每个名称生成一个option对象，添加到<select>中
            for(var i = 0; i < arr.length; i++) {
                var op = document.createElement("option");//创建一个指名名称元素
                op.value = arr[i];//设置op的实际值为当前的省份名称
                var textNode = document.createTextNode(arr[i]);//创建文本节点
                op.appendChild(textNode);//把文本子节点添加到op元素中，指定其显示值
                 
                document.getElementById("p").appendChild(op);
            }
        }
    };
     
     
    /*
    第二件事情：给<select name="province">添加改变监听
    使用选择的省份名称请求CityServlet，得到<province>元素(xml元素)！！！
    获取<province>元素中所有的<city>元素，遍历之！获取每个<city>的文本内容，即市名称
    使用每个市名称创建<option>元素添加到<select name="city">
    */
    var proSelect = document.getElementById("p");
    proSelect.onchange = function() {
        var xmlHttp = createXMLHttpRequest();
        xmlHttp.open("POST", "/Web04/CityServlet", true);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send("pname=" + proSelect.value);//把下拉列表中选择的值发送给服务器！
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                /*
                把select中的所有option移除（除了请选择）
                */
                var citySelect = document.getElementById("c");
                // 获取其所有子元素
                var optionEleList = citySelect.getElementsByTagName("option");
                // 循环遍历每个option元素，然后在citySelect中移除
                while(optionEleList.length > 1) {//子元素的个数如果大于1就循环，等于1就不循环了！
                    citySelect.removeChild(optionEleList[1]);//总是删除1下标，因为1删除了，2就变成1了！
                }
                 
                 
                var doc = xmlHttp.responseXML;
                // 得到所有名为city的元素
                var cityEleList = doc.getElementsByTagName("city");
                // 循环遍历每个city元素
                for(var i = 0; i < cityEleList.length; i++) {
                    var cityEle = cityEleList[i];//得到每个city元素
                    var cityName;
                    // 获取市名称
                    if(window.addEventListener) {//处理浏览器的差异
                        cityName = cityEle.textContent;//支持FireFox等浏览器
                    } else {
                        cityName = cityEle.text;//支持IE
                    }
                     
                    // 使用市名称创建option元素，添加到<select name="city">中
                    var op = document.createElement("option");
                    op.value = cityName;
                    // 创建文本节点
                    var textNode = document.createTextNode(cityName);
                    op.appendChild(textNode);//把文本节点追加到op元素中
                     
                    //把op添加到<select>元素中
                    citySelect.appendChild(op);
                }
            }
        };     
    };
};
</script>
  </head>
   
  <body>
<h1>省市联动</h1>
<select name="province" id="p">
  <option>===请选择省===</option>
</select>
　　　
<select name="city" id="c">
  <option>===请选择市===</option>
</select>
  </body>
</html>

　　

处理省份的servlet

Web04\src\ajax\ProvinceServlet.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package ajax;
 
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader;
 
/**
 * Servlet implementation class ProvinceServlet
 */
@WebServlet("/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
        
    public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        try {
            //创建解析器对象
            SAXReader reader = new SAXReader();
            //得到输入流
            InputStream input = this.getClass().getResourceAsStream("/china.xml");
            //得到document对象
            Document doc = reader.read(input);
            //查询所有的province的name属性,//province表示无限深度查询，/表示子节点
            List<Attribute> arrList = doc.selectNodes("//province/@name");
            //将所有的省份名称用逗号连接起来
            StringBuilder sb = new StringBuilder();
            for(int i=0;i<arrList.size();i++){
                sb.append(arrList.get(i).getValue());
                if(i<arrList.size()-1){
                    sb.append(",");
                }
            }
            response.getWriter().print(sb);
        } catch (DocumentException e) {
            throw new RuntimeException();
        }
         
    }
 
 
}

　　

处理市数据的servlet

Web04\src\ajax\CityServlet.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package ajax;
 
import java.io.IOException;
import java.io.InputStream;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
 
/**
 * Servlet implementation class CityServlet
 */
@WebServlet("/CityServlet")
public class CityServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
        
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
         
        request.setCharacterEncoding("utf-8");
        //注意：发送xml这里要修改！！！
        response.setContentType("text/xml;charset=utf-8");
        try {
            //创建解析器对象
            SAXReader reader = new SAXReader();
            //得到输入流
            InputStream input = this.getClass().getResourceAsStream("/china.xml");
            //得到document对象
            Document doc = reader.read(input);
            //得到省份名称
            String pname = request.getParameter("pname");
            Element proEle = (Element) doc.selectSingleNode("//province[@name='" + pname + "']");
            //把元素转换成字符串
            String xmlStr = proEle.asXML();
            response.getWriter().print(xmlStr);
        } catch (Exception e) {
            throw new RuntimeException();
        }
    }
 
}

　　

Web04\src\china.xml

　　

效果：

 

选择一个省份，弹出市级列表

 

posted @   头痛不头痛  阅读(464)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
历史上的今天：
2016-08-16 LVM磁盘管理
点击右上角即可分享
微信分享提示
主题色彩