Ajax+XML二级联动下拉框（省份、城市选择框）

最新推荐文章于 2021-10-21 20:39:47 发布

guowd

最新推荐文章于 2021-10-21 20:39:47 发布

阅读量1.7k

点赞数

分类专栏： Ajax 文章标签： xml ajax xmlhttprequest hashmap function string

本文链接：https://blog.csdn.net/guowd/article/details/3175493

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JSP代码如下：

<html>
<head>
  <base href="<%=basePath%>">
  <title>Ajax二级下拉菜单示例</title>
  <script type="text/javascript">

   /* Create a new XMLHttpRequest object to talk to the Web server */
   var xmlHttp = false;
   /*@cc_on @*/
   /*@if (@_jscript_version >= 5)
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e2) {
       xmlHttp = false;
     }
   }
   @end @*/

   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();
   }

   function selectPro() {
    var selPro=document.getElementById("pro");
    var url = "CityServlet?pro="+selPro.value;
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = updateCity;
    xmlHttp.send(null);
   }

   function updateCity() {
      if (xmlHttp.readyState == 4 ) {
       if(xmlHttp.status ==200){
        var xml;

     /** 方法一 */
   /*     xml = xmlHttp.responseXml; */

     /** 方法二 */
       xml= new ActiveXObject("Microsoft.XMLDOM");
     xml.load(xmlHttp.responseXml);

<body>
  <form>
   <select id="pro" οnchange="selectPro();">
    <option>--请选择省份--</option>
    <option value="JiangXi">江西省</option>
    <option value="JiangSu">江苏省</option>
    <option value="ZheJiang">浙江省</option>
   </select>
   <select id="city">
    <option>--请选择城市--</option>
   </select>
  </form>
</body>
</html>

Servlet代码如下：

public class CityServlet extends HttpServlet {

Map cityMap;

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/xml");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  String pro = request.getParameter("pro");
  List<String> citys=(List<String>)cityMap.get(pro);
  StringBuffer sb=new StringBuffer("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");
  sb.append("<citys>");
  for (String city : citys) {
   sb.append("<city>");
   sb.append(city);
   sb.append("</city>");
  }
  sb.append("</citys>");
  out.write(sb.toString());
  out.flush();
  out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}

public void init() throws ServletException {
  cityMap = new HashMap();
  List<String> city=new ArrayList<String>();
  city.add("南昌");
  city.add("九江");
  city.add("吉安");
  cityMap.put("JiangXi", city);
  city=new ArrayList<String>();
  city.add("南京");
  city.add("苏州");
  city.add("镇江");
  cityMap.put("JiangSu", city);
  city=new ArrayList<String>();
  city.add("杭州");
  city.add("温州");
  cityMap.put("ZheJiang", city);
}
}