OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

AJAX解析XML实例之下拉框省、市二级联动

2022-2-5 16:58| 发布者: 菜鸟教程小白| 查看: 215| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来，下面有个不错的示例，需要的朋友可以参考下

这个例子是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值：

jsp页面代码：

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
</head> 
<script type="text/javascript"> 
var xmlHttp=null; 
//创建xmlhttprequest对象 
if(window.XMLHttpRequest){ 
xmlHttp=new XMLHttpRequest(); 
}else{ 
xmlHttp=new ActiveObject("Microsoft.XMLHTTP"); 
} 
var url="GetProvince?time="+new Date().getTime(); 
function getsheng(){ 
xmlHttp.open("post",url,true); 
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xmlHttp.send(); 
xmlHttp.onreadystatechange=getprovince; 
} 
function getprovince(){ 
if(xmlHttp.readyState==4 && xmlHttp.status==200){ 
var xmlFile=xmlHttp.responseXML; 
//获取省的节点 
var province=xmlFile.getElementsByTagName("province");; 
//获取select标签 
var pselect=document.getElementById("sheng"); 
//循环取出xml文件省信息 
for(var i=0;i<province.length;i++){ 
var shorter=province[i].getAttribute("name"); 
var provincename=province[i].text; 
//循环将省信息放入select中 
pselect.options.add(new Option(provincename,shorter));//(text,value) 
} 
} 
} 
function getcity(){ 
xmlHttp.open("post",url,true); 
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
var province=document.getElementById("sheng").value; 
alert("省："+province); 
xmlHttp.send("province="+province); 
xmlHttp.onreadystatechange=setcity; 
} 
function setcity(){ 
if(xmlHttp.readyState==4 && xmlHttp.status==200){ 
var city=document.getElementById("city"); 
var cityXml=xmlHttp.responseXML; 
city.options.length=0; 
var citys=cityXml.getElementsByTagName("city"); 
for(var i=0;i<citys.length;i++){ 
var cityname=citys[i].text; 
alert(cityname); 
city.options.add(new Option(cityname,cityname)); 
} 
} 
} 
</script> 
<body onload="getsheng()"> 
省：<select name="sheng" id="sheng" onchange="getcity()"> 
<option>请选择</option> 
</select> 
市：<select name="city" id="city"> 

</select> 
</body> 
</html> 

servlet代码：

复制代码代码如下:

 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
request.setCharacterEncoding("utf-8"); 
String province=request.getParameter("province"); 
if(province!=null){ 
sendCity(request,response,province); 
}else{ 
ShengDao sd=new ShengDao(); 
List<Sheng> list=sd.selAll(); 
response.setCharacterEncoding("utf-8"); 
PrintWriter out=response.getWriter(); 
response.setContentType("text/xml"); 
out.println("<?xml version='1.0' encoding='UTF-8'?>"); 
out.println("<china>"); 
for (Sheng sheng : list) { 
out.print("<province name='"+sheng.getShorter()+"'>"+sheng.getProvince()+"</province>"); 
out.println(); 
} 
out.println("</china>"); 
} 
} 

public void sendCity(HttpServletRequest request, HttpServletResponse response,String shorter){ 
try { 
request.setCharacterEncoding("utf-8"); 
} catch (UnsupportedEncodingException e1) { 
e1.printStackTrace(); 
} 
try { 
response.setCharacterEncoding("utf-8"); 
PrintWriter out=response.getWriter(); 
response.setContentType("text/xml"); 
ShengDao sd=new ShengDao(); 
List<City> list=sd.selAll(shorter); 
out.println("<?xml version='1.0' encoding='UTF-8'?>"); 
out.println("<province>"); 
for (City city : list) { 
out.println("<city name='"+city.getShorter()+"'>"+city.getCityname()+"</city>"); 
System.out.println("<city name='"+city.getShorter()+"'>"+city.getCityname()+"</city>"); 
} 
out.println("</province>"); 
} catch (IOException e) { 
e.printStackTrace(); 
} 
} 