通过AJAX实现三级下拉框查询省市等时间:2021-03-01 23:08:131. 一个单独的测试界面: <%@ 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> <base href="<%=basePath%>"> <title>My JSP 'new.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <mce:script type="text/javascript" src="resources/jquery.js" mce_src="resources/jquery.js"></mce:script> </head> <body> <select id="Select1" name="Select1" onchange="selectProvince();"></select> <select id="Select2" name="Select2" onchange="selectArea();"></select> <select id="Select3" name="Select3"></select> </body> </html> <mce:script type="text/javascript"><!-- window.onload = function() { initArea(); } function initArea() { /*获取,引用三个下拉框 */ var dropElement1=document.getElementById("Select1"); var dropElement2=document.getElementById("Select2"); var dropElement3=document.getElementById("Select3"); /*自定义一个方法 把传进来的对象清除 这里清除了三个下拉所有框的选项*/ removeDropDownList(dropElement1); removeDropDownList(dropElement2); removeDropDownList(dropElement3); var pOption = document.createElement("option"); pOption.value = "0"; pOption.text = "全国"; dropElement1.add(pOption); var cOption = document.createElement("option"); cOption.value = "0"; cOption.text = "全部市"; dropElement2.add(cOption); var aOption = document.createElement("option"); aOption.value = "0"; aOption.text = "全区县"; dropElement3.add(aOption); var url = "servlet/XmlForAJAX"; url = encodeURI(encodeURI(url)); doAjax(url,null,null,dropElement1,dropElement2,dropElement3); } /** * 当选择一个省的时候自动的添加该省下的市 */ function selectProvince() { var dropElement1=document.getElementById("Select1"); //获取选中项的内容 var provinceName=dropElement1.options[dropElement1.selectedIndex].text; var dropElement2=document.getElementById("Select2"); var dropElement3=document.getElementById("Select3"); removeDropDownList(dropElement2); removeDropDownList(dropElement3); var cOption = document.createElement("option"); cOption.value = "0"; cOption.text = "全部市"; dropElement2.add(cOption); var aOption = document.createElement("option"); aOption.value = "0"; aOption.text = "全区县"; dropElement3.add(aOption); var url = "servlet/XmlForAJAX"; url = encodeURI(encodeURI(url)); doAjax(url,provinceName,null,dropElement1,dropElement2,dropElement3); } /** * 当选择一个省的时候自动的添加该省下的市 */ function selectArea() { var dropElement1=document.getElementById("Select1"); var provinceName=dropElement1.options[dropElement1.selectedIndex].text; var dropElement2=document.getElementById("Select2"); var cityName=dropElement2.options[dropElement2.selectedIndex].text; var dropElement3=document.getElementById("Select3"); removeDropDownList(dropElement3); var aOption = document.createElement("option"); aOption.value = "0"; aOption.text = "全区县"; dropElement3.add(aOption); var url = "servlet/XmlForAJAX"; url = encodeURI(encodeURI(url)); doAjax(url,provinceName,cityName,dropElement1,dropElement2,dropElement3); } //AJAX操作类 function doAjax(url,provinceName,cityName,dropElement1,dropElement2,dropElement3) { $.ajax({ type:"POST", secureuri:false, dataType:"xml", url: url, timeout:1000, success:function(xml) { $(xml).find("province").each(function(i){ var province = $(this).attr("name"); //alert(province); if(provinceName == null || provinceName == "") { var pOption = document.createElement("option"); pOption.value = province; pOption.text = province; dropElement1.add(pOption); } if(provinceName != null && provinceName != "") { if(provinceName == province) { $(this).find("city").each(function(j){ var city = $(this).attr("name"); //alert("city is " + city); if(cityName == null || cityName == "") { var pOption = document.createElement("option"); pOption.value = city; pOption.text = city; dropElement2.add(pOption); } if(cityName != null && cityName != null) { if(cityName == city) { $(this).find("area").each(function(k){ var area = $(this).attr("name"); //alert("area is " + area); var pOption = document.createElement("option"); pOption.value = area; pOption.text = area; dropElement3.add(pOption); }); } } }); } } }); }, error:function(xml) { alert("error."); } }); } /* 清除下拉框的选项 */ function removeDropDownList(obj) { //如果obj不为空的时候 if(obj) { var length = obj.options.length; if(length > 0) { for(var i=length;i >= 0;i--) { obj.remove(i); } } } } // --></mce:script> 2. servlet package service; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import upload.FileOperation; public class XmlForAJAX extends HttpServlet { /** * Constructor of the object. */ public XmlForAJAX() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out .println("<!DOCTYPE HTML PUBLIC /"-//W3C//DTD HTML 4.01 Transitional//EN/">"); out.println("<HTML>"); out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>"); out.println(" <BODY>"); out.print(" This is "); out.print(this.getClass()); out.println(", using the GET method"); out.println(" </BODY>"); out.println("</HTML>"); out.flush(); out.close(); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setHeader("Content-Type","text/xml; charset=UTF-8"); PrintWriter out = response.getWriter(); FileOperation f = new FileOperation(); String str = ""; try { InputStream in = f.getResourceAsStream("service/area.xml"); /* if(in != null) { System.out.println("不是空的"); } else { System.out.println("是空的。"); }*/ int i = -1; ByteArrayOutputStream bis = new ByteArrayOutputStream(); while((i = in.read()) != -1) { bis.write(i); } //System.out.println(bis.toString("UTF-8")); out.print(bis.toString("UTF-8")); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } /* StringBuffer bf = new StringBuffer(); bf.append("<?xml version=/"1.0/" encoding=/"UTF-8/"?>") .append("<stulist>").append("<student email=/"1@1.com/">").append("<name>zhangsan</name>").append("<id>1</id>") .append("</student>").append("<student email=/"2@2.com/">").append("<name>lisi</name>").append("<id>2</id>") .append("</student>").append("</stulist>"); System.out.println(bf.toString()); out.print(bf.toString());*/ out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } } 3. XML文件,可以按照以下格式多添加几个市 <?xml version="1.0" encoding="UTF-8"?> <root name="中国"> <province name="北京" postcode="beijing" index="1" id="1"> <city name="北京" postcode="100000" index="1"> <area name="北京市" postcode="100000" price="1" index="1"/> <area name="门头沟区" postcode="102300" index="2"/> <area name="房山区" postcode="102400" index="3"/> <area name="顺义区" postcode="101300" index="4"/> <area name="通州区" postcode="101100" index="5"/> <area name="昌平区" postcode="102200" index="6"/> <area name="密云县" postcode="101500" index="7"/> <area name="延庆县" postcode="102100" index="8"/> <area name="大兴县" postcode="102600" index="9"/> <area name="怀柔县" postcode="101400" index="10"/> <area name="平谷县" postcode="101200" index="11"/> </city> </province> </root>