基于XML，以POST方式，完成省份-城市二级下拉联动

最新推荐文章于 2020-09-03 21:00:40 发布

Tomsheng321

最新推荐文章于 2020-09-03 21:00:40 发布

阅读量355

点赞数

分类专栏： JS

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

10_provincecity.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基于XML，以POST方式，完成省份-城市二级下拉联动</title>
    <script type="text/javascript" src="js/ajax.js"></script>
  </head>
  <body>
		
	<select id="provinceID" style="width:111px">
		<option>选择省份</option>
		<option>湖南</option>
		<option>广东</option>
	</select>	
	   
	<select id="cityID" style="width:111px">
		<option>选择城市</option>
	</select>	
	
	<script type="text/javascript">
		//定位省份下拉框，同时添加内容改变事件
		document.getElementById("provinceID").onchange = function(){
			//清空城市下拉框中的内容，除第一项外
			var cityElement = document.getElementById("cityID");
			cityElement.options.length = 1;
			//获取选中option标签的索引号，从0开始			
			var index = this.selectedIndex; 	
			//定位选中的option标签
			var optionElement = this[index];
			//获取选中的option标签中的内容，即省份
			var province = optionElement.innerHTML;
			//如果选中的内容不是"选择省份"
			if("选择省份" != province){
				//NO1)
				var ajax = createAJAX();
				//NO2)
				var method = "POST";
				var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();
				ajax.open(method,url);
				//设置AJAX请求头
				ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
				//NO3)
				var content = "province=" + province;
				ajax.send(content);
				
				//---------------------------------等待
				
				//NO4)
				ajax.onreadystatechange = function(){
					if(ajax.readyState == 4){
						if(ajax.status == 200){
							//NO5)从AJAX异步对象中获取服务器响应的xml文档
							var xmlDocument = ajax.responseXML;
							
							//NO6)按照DOM规则，解析XML文档
								
							var cityElementArray = xmlDocument.getElementsByTagName("city");	
							var size = cityElementArray.length;
							for(var i=0;i<size;i++){
								//innerHTML只能用在html/jsp中，不能用在xml中
								var city = cityElementArray[i].firstChild.nodeValue;
								//<option></option>
								var optionElement = document.createElement("option");	
								//<option>广州</option>
								optionElement.innerHTML = city;
								//<select><option>广州</option></select>
								cityElement.appendChild(optionElement);
							}
						}
					}
				}
			}
		}
	</script>
	
  </body>
</html>

ProvinceCityServlet.java

package cn.itcast.javaee.js.provincecity;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 基于XML，以POST方式，完成省份-城市二级下拉联动
 * @author AdminTC
 */
public class ProvinceCityServlet extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String province = request.getParameter("province");
		
		//通知AJAX异步对象，服务器响应的数据为xml格式的
		response.setContentType("text/xml;charset=UTF-8");
		//获取字符输出流
		PrintWriter pw = response.getWriter();
		
		pw.write("<?xml version='1.0' encoding='UTF-8'?>");
		pw.write("<root>");
								
		
		if("广东".equals(province)){
			pw.write("<city>广州</city>");
			pw.write("<city>深圳</city>");
			pw.write("<city>中山</city>");
		}else if("湖南".equals(province)){
			pw.write("<city>长沙</city>");
			pw.write("<city>株洲</city>");
			pw.write("<city>湘潭</city>");
			pw.write("<city>岳阳</city>");
		}
		
		
		pw.write("</root>");
		pw.flush();
		pw.close();
	}
}

Tomsheng321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于XML，以POST方式，完成省份-城市二级下拉联动

10_provincecity.jsp 基于XML，以POST方式，完成省份-城市二级下拉联动选择省份湖南广东选择城市 //定位省份下拉框，同时添加内容改变事件 document.getElementById("provinceID").onchange = function()
复制链接

扫一扫

专栏目录