AJAX解析XML实例之下拉框省、市二级联动
这个例子是实现省、市二级联动,当选择某一省时,改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析XML文件得到的数据传回到jsp页面,其中省市均是从数据库取到的值:
jsp页面代码:
servlet代码:
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(); } }
相关推荐
zrtlin 2020-11-09
xuebingnan 2020-11-05
wikiwater 2020-10-27
heheeheh 2020-10-19
Crazyshark 2020-09-15
softwear 2020-08-21
ZGCdemo 2020-08-16
jczwilliam 2020-08-16
littleFatty 2020-08-16
idning 2020-08-03
jinxiutong 2020-07-26
lanzhusiyu 2020-07-19
Skyline 2020-07-04
xiaofanguan 2020-06-25
Aveiox 2020-06-23
dragonzht 2020-06-17