爱尚实训哈尔滨校区,Java培训,大数据培训,Python培训,人工智能培训,计算机培训,IT培训,软件培训

在线咨询

当前位置: 首页> 学习园地

学习资料

    爱尚实训-Ajax(五)案例2:省市联动-哈尔滨Java培训

    2018-05-05更新

     

    1、编写显示数据的容器级联下拉列表

    2、实现ajax响应数据

    //创建XMLHttpRequest对象

    //通过事件调用回调函数处理响应结果,

    //创建一个服务器连接

    //发送请求

    Jsp:级联菜单、ajax代码

    <%@ page language="java" contentType="text/html; charset=UTF-8"

        pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Insert title here</title>

    <script type="text/javascript" language="javascript" src="js/req.js"></script>

     

    <script type="text/javascript" language="javascript">

      window.onload = function(){

      var province = document.getElementById("province");

      var city = document.getElementById("city");

      

    province.onchange = function(){

      var provinceid = province.value;

      city.options.length=0;

      

      //清除原内容

      if(province.value==0){

      city.add(new Option('==请选择==','0'));//添加option

      return;

      }

      

      

      //1.创建xmlHttpRequest对象

      var req = xmlHttpRequest();

      

      //4.处理响应结果,设置回调函数

      req.onreadystatechange = function(){

      if(req.status == 200 && req.readyState == 4){

      var data = req.responseText;

      var citys = data.split(",");

      for(var i=0;i<citys.length;i++){

      city.add(new Option(citys[i],citys[i])); //添加option

      }

      }

      }

      

       //2.发送请求

      req.open("get","<%=pageContext.getServletContext().getContextPath()%>/GetCity?provinceid="+provinceid);

      

      //3.发送请求

      req.send(null);

      

      };

      };

     

    </script>

    </head>

    <body>

    <h1>省市联动</h1><hr>

        <h3>Where Are You From ?</h3>

      

        省份:<select id="province" name="province" >

          <option value="0">==请选择==</option>

          <option value="1">黑龙江</option>

          <option value="2">沈阳</option>

        

            </select>

        城市:<select id="city" name="city">

           <option value="0">==请选择==</option>

          

          </select>

          <input type="submit" value="提交">

    </body>

    </html>

     

    Servlet:GetCity代码

    response.setContentType("text/html;charset=UTF-8");

        request.setCharacterEncoding("UTF-8");

    PrintWriter out = response.getWriter();

    //创建map集合,存储list集合

    Map<String,List<String>> map = new HashMap<String,List<String>>();

    List<String> list1 = new ArrayList<String>();

    list1.add("哈尔滨");

    list1.add("牡丹江");

    list1.add("佳木斯");

    map.put("1", list1);

     

    List<String> list2 = new ArrayList<String>();

    list2.add("沈阳");

    list2.add("大连");

    list2.add("四平");

    map.put("2", list2);

     

    //接收客户端提交的省份id

    String provinceid = request.getParameter("provinceid");

     

    List<String> plist = map.get(provinceid);

    //StringBuffer对象能够拼接字符串

    StringBuffer sb = new StringBuffer();

    String str = "";

    for(String s : plist){

    str = sb.append(s).append(",").toString(); //通过逗号连接list集合中的数据

    }

    //利用字符串函数substring,截取字符串,去掉末尾的逗号

    str = str.substring(0,str.length()-1);

     

    out.print(str);