您的位置：首页 > 其它

58-004-2 省级城市二级联动 ajax+servlet 通过xml传递数据.

2016-08-10 16:49 477 查看

1）编写后台servlet
/Test/src/servlet/CityProvinceServlet.java

public class CityProvinceServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String province = req.getParameter("province");
        System.out.println("==CityProvinceServlet== province:"+province);
        List<String> result =new ArrayList<String>();
        resp.setContentType("text/xml;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print("<?xml version='1.0' encoding='UTF-8'?>");
        writer.print("<root>");
        if("湖南".equals(province)){
            writer.print("<city>张家界</city><city>长沙</city>");
        }
        else{
            writer.print("<city>广州</city><city>中山</city>");
        }
        writer.print("</root>");
        writer.flush();
        writer.close();
    }
}

2）编写前台页面

<%@ 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>find city</title>
  </head>
  <body>
      <select name="province" id="province">
          <option>选择省份</option>
          <option>广东</option>
          <option>湖南</option>
      </select>
      <select name="city" id="city">
          <option value="-1">选择城市</option>
      </select>

      <script type="text/javascript">
      document.getElementById("province").onchange=function(){
          var index = document.getElementById("province").selectedIndex;
          var province = document.getElementById("province")[index].innerHTML;
          var cityEle = document.getElementById("city");
          //清空城市下拉列表的所有选项
          cityEle.options.length=1;
          if("选择省份"==province)
              return ;
          var ajax = new XMLHttpRequest() ;
          var url = "<%=basePath%>/CityProvinceServlet?time="+new Date().getTime();
          ajax.open("post", url) ;
          ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
          ajax.send("province="+province);
          ajax.onreadystatechange=function(){
              if(ajax.readyState==4)
                  if(ajax.status==200){
                      //以xml形式返回数据
                      var result = ajax.responseXML ;
                      var size = result.getElementsByTagName("city").length;
                      for(var i=0;i<size;i++){
                          //获取xml格式中city节点下的文本信息
                          var city = result.getElementsByTagName("city")[i].firstChild.nodeValue;
                          var cityNode = document.createElement("option");
                          cityNode.innerHTML=city ;
                          cityEle.appendChild(cityNode);
                      }
                  }
          };
      }
      </script>
  </body>
</html>

3）配置web.xm
/Test/WebRoot/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">

  <servlet>
    <servlet-name>CityProvinceServlet</servlet-name>
    <servlet-class>servlet.CityProvinceServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>CityProvinceServlet</servlet-name>
    <url-pattern>/CityProvinceServlet</url-pattern>
  </servlet-mapping>
</web-app>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航