AJAX基于XML二级联动下拉菜单<jsp>

最新推荐文章于 2021-08-05 22:23:24 发布

幻墨如鸳

最新推荐文章于 2021-08-05 22:23:24 发布

阅读量727

点赞数

分类专栏： js前端文章标签： javascript

本文链接：https://blog.csdn.net/yuan444075705/article/details/17997501

版权

js前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
  	 <title>基于XML的二级菜单联动</title>
  </head>
  
  <body>
    <select id="province">
    	<option>选择省份</option>
    	<option>安徽省</option>
    	<option>江苏省</option>
    	<option>广东省</option>
    	<option>四川省</option>
    </select>
    <select id="city">
    	<option>选择城市</option>
    </select>
    
    <script type="text/javascript">
    	//对省份绑定改变事件 
    	document.getElementById("province").onchange = function(){
    	
    		//获取时将城市获取进行清空一次
    		//获取city节点
    		var selectElement = document.getElementById("city");
    		var index = selectElement.length;
    		//保留第一个选项
    		if(index>0){
    			for(var i=index-1;i>0;i--){
    				//删除之前的节点 
    				selectElement.removeChild(selectElement.options[i]);
    			}
    		}
    		
    		//创建AJAX引擎
    		var xhr = createAjax();
    		//设置请求方式
    		method = "POST";
    		//请求路径
    		url = " ${pageContext.request.contextPath}/XmlProcinceCityServlet?time="+new Date().getTime();
    		//获取当前选择的内容 
    		var province = this[this.selectedIndex].value;
    		var content = "province="+province;
    		xhr.open(method,url);
    		//设置浏览器自动编码
    		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");		
    		xhr.send(content);
    		
    		//获取服务器的响应
    		xhr.onreadystatechange = function(){
				if(xhr.readyState==4){
					if(xhr.status==200){
						//获取服务器返回的XML
						var xmlString = xhr.responseXML;
						//解析XML文档
						//获取city节点
						var cityElement = xmlString.getElementsByTagName("city");
						var size = cityElement.length;
						for(var i=0;i<size;i++){
							//获取节点的内容 
							var value = cityElement[i].firstChild.nodeValue;
							//创建option节点
							var optionElement = document.createElement("option");
							
							//为节点设置值 
							optionElement.innerHTML = value;
							//获取城市下拉 
							var selectElement = document.getElementById("city");
							//添加节点 
							selectElement.appendChild(optionElement);		
						}	
					}
				}
			}
    		
    		
    	}
    	
    	
    	//创建AJAX引擎对象
    	function createAjax(){
    		var xhr = null;
    		try {
    			//针对IE
				xhr = new ActiveXObject("microsoft.xmlhttp");
			} catch (e) {
				try {
				//针对非IE
				xhr = new XMLHttpRequest();
					
				} catch (e) {
					alert("请使用支持AJAX主流浏览器.");
				}
			}
    		
    		return xhr;
    	}
    	
    </script>
  </body>
</html>









Serlvet内容如下：