省市联动

最新推荐文章于 2021-05-26 22:35:46 发布

淘技术

最新推荐文章于 2021-05-26 22:35:46 发布

阅读量413

点赞数 1

分类专栏： xml json 文章标签： xml dom4j 省市联动

本文链接：https://blog.csdn.net/m0_37983376/article/details/72730950

版权

json 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

xml

0 篇文章 0 订阅

订阅专栏

1.使用解析xml文档技术

2.需要的jar包

commons-beanutils-1.8.0.jar
commons-collections-3.2.1.jar
commons-lang-2.6.jar
commons-logging-1.1.1.jar
dom4j-1.6.1.jar
ezmorph-1.0.6.jar
jaxen-1.1-beta-6.jar
json-lib-2.4-jdk15.jar

3.创建xml文档 pro.xml

<?xml version="1.0" encoding="UTF-8"?>


<中国>
	<省 name="江苏省">
		<市 name="无锡市">
			<区 name = "滨湖区"></区>
			<区 name = "新吴区"></区>
			<区 name = "锡山区"></区>
		</市>
		
		<市 name="苏州市">
			<区 name = "姑苏区"></区>
			<区 name = "沧浪区"></区>
			<区 name = "吴中区"></区>
		</市>
	</省>
	<省 name="广东省">
		<市 name="广州市">
			<区 name = "越秀区"></区>
			<区 name = "海珠区"></区>
			<区 name = "天河区"></区>
		</市>
		
		<市 name="深圳市">
			<区 name = "福田区"></区>
			<区 name = "南山区"></区>
			<区 name = "宝安区"></区>
		</市>
	</省>
</中国>

4.创建class类对xml文档进行解析首先获得“省”信息

package com.sq.dom4j;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONObject;

import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.Node;
import org.dom4j.io.SAXReader;

/**
 *@author sq
 *
 */
public class Pro {
	
	public static void main(String[] args) {
		System.out.println(new Pro().Privence());
	}
	
	
	public  static String ToJson(List<String> json){
		//创建json对象
		JSONObject jsonObject = new JSONObject();
		//调用accumulate方法，将集合以键值对的形式返回
		return jsonObject.accumulate("pro", json).toString();
	}
	
	
	public static List<String> Privence(){
		SAXReader reader = new SAXReader();//解析器
		try {
			//获得document
			Document document = reader.read(ParseXml.class.getClassLoader().getResource("pr.xml"));
			Element root = document.getRootElement();
			//获得省节点
			List<Node> nodes = 	root.selectNodes("//省");
			List<String> prlist = new ArrayList<String>();
				for(Node node:nodes){
					//将node转换成element
					Element element = (Element) node;
					//获得省标签的name属性,保存到list集合中
					prlist.add(element.attributeValue("name"));
				}
			return prlist;
			}catch(Exception e){
				e.printStackTrace();
			}
		return null;
	}
}

5.页面获取

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市联动</title>
<script type="text/javascript">
    	window.onload = function() {
    			//第一次获取省信息
    			//创建XmlHttpRequest对象
        		var xmlHttpReq = createXmlHttpRequest();
        		//发送请求
        		xmlHttpReq.open("get","/shengshi/proServlet?type=1",true);
        		//不需要发送其他信息
        		xmlHttpReq.send(null);
        		//当onreadystate改变时进行判断并操作
        		xmlHttpReq.onreadystatechange = function() {
        			if(xmlHttpReq.readyState == 4) {
        				if(xmlHttpReq.status == 200 || xmlHttpReq.status == 304) {
        					//jason.parse将获取到的字符串转换成json对象
        						var pro = JSON.parse(xmlHttpReq.responseText);
        						var list = pro.pro;
        						//遍历pro拼凑html语句
        						var str = "<option>--省--</option>";
        						for(var i=0;i<list.length;i++){
        							str = str +"<option value="+list[i]+">"+list[i]+"</option>"
        						}
        						var province = document.getElementById("pro");
        						//将新的html语句替换
        						province.innerHTML = str;
        						//判定当province下拉列表框值改变时，获取当前省信息发送Ajax请求
        						
        					};
        				}
        		};
        		function   createXmlHttpRequest(){
     			   var xmlHttp;
     			   try{    //Firefox, Opera 8.0+, Safari
     			           xmlHttp=new XMLHttpRequest();
     			    }catch (e){
     			           try{    //Internet Explorer
     			                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     			            }catch (e){
     			                  try{
     			                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     			                  }catch (e){}  
     			           }
     			    }
     			   return xmlHttp;
     		}
    		};
    		
    </script>

</head>
<body>
	<select id="pro">
		<option>--省--</option>
	</select>
	<select>
		<option>--市--</option>
	</select>
	<select>
		<option>--区--</option>
	</select>
</body>
</html>

6.根据用户选择省获取市信息

1.获取select框的值发送ajax请求

province.onchange = function(){
        							var xmlHttpReq = createXmlHttpRequest();
        			        		//发送请求
        			        		xmlHttpReq.open("get","/shengshi/proServlet?type=2&province="+province.value,true);
        			        		//不需要发送其他信息
        			        		xmlHttpReq.send(null);
        						}

2.后台获取类型信息及当前省信息

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		String type = request.getParameter("type");
		String province = request.getParameter("province");
		PrintWriter out = response.getWriter();
		if("1".equals(type)){
			String pro = Pro.ToJson(Pro.Privence(),type);
			out.write(pro);
		}else{
			if(!"--省--".equals(province)){
				String city = Pro.ToJson(Pro.City(province),type);
				out.write(city);
			}
		}
		out.flush();
		out.close();
	}

3.调用方法City()完成

	public static List<String> City(String pro) {
		SAXReader reader = new SAXReader();// 解析器
		try {
			// 获得document
			Document document = reader.read(ParseXml.class.getClassLoader()
					.getResource("pr.xml"));
			Element root = document.getRootElement();
			// 获得省节点
			List<Node> provinces = root.selectNodes("//省");
			//new一个集合用于存放城市名
			List<String> cities = new ArrayList<String>();
			for (int i = 0; i < provinces.size(); i++) {
				//遍历省集合，获取每个node转换成element
				Element e = (Element) provinces.get(i);
				//判断省的name属性是否与我想要的相同
				if (pro.equals(e.attributeValue("name"))) {
					List<Node> nodeList = e.elements();
					//遍历省相应下面的市
					for (Node n : nodeList) {
						Element e1 = (Element) n;
						//获取name属性存到集合中
						cities.add(e1.attributeValue("name"));
					}
				}
			}
			return cities;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

4.页面同上省显示方法

province.onchange = function(){
					var xmlHttpReq = createXmlHttpRequest();
	        		//发送请求
	        		xmlHttpReq.open("get","/shengshi/proServlet?type=2&province="+province.value,true);
	        		//不需要发送其他信息
	        		xmlHttpReq.send(null);
	        		xmlHttpReq.onreadystatechange = function() {
	        			if(xmlHttpReq.readyState == 4) {
	        				if(xmlHttpReq.status == 200 || xmlHttpReq.status == 304) {
	        					var pro = JSON.parse(xmlHttpReq.responseText);
        						var list = pro.city;
        						//遍历pro拼凑html语句
        						var str = "<option>--市--</option>";
        						for(var i=0;i<list.length;i++){
        							str = str +"<option value="+list[i]+">"+list[i]+"</option>"
        						}
        						
        						//将新的html语句替换
        						city.innerHTML = str;
        						//判定当province下拉列表框值改变时，获取当前省信息发送Ajax请求
	        				}
	        			}
	        		}
				}