Ajax实现二级联动

ajax02.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>二级联动</title>
    <base href="<%=request.getcontextpath()+"/"%>">
    
    <script type="text/javascript">

          var  xhr;

          function   change(val) {

              //发送Ajax的请求

                //A、创建XHR对象
                 xhr =new  XMLHttpRequest();

                //B、和服务器建立连接
                 xhr.open("get","AjaxServlet2?val="+val,true);

                //C、执行回调函数
                 xhr.onreadystatechange=process;

                //D、发送数据
                xhr.send(null);

          }
          
          function   process() {

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

                  //'[篮球, 足球, 乒乓球]'
                  var  text= xhr.responseText;
                  //'篮球, 足球, 乒乓球'
                 var  t2= text.substring(1,text.length-1);
                  //  ["抖音", " 快手", " YY直播"]
                 var  t3= t2.split(",");

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

                 //每次进入循环需要重置
                 s.innerHTML="<option>--请选择--</option>";

                 for(var  i in t3){

                     s.innerHTML+='<option>'+t3[i]+'</option>';
                 }
              }
          }
        
    </script>
    
</head>
<body>

  <select onchange="change(this.value)">
      <option>--请选择--</option>
      <option value="1">体育</option>
      <option value="2">直播</option>
      <option value="3">美食</option>
  </select>

  <select id="s">
      <option>--请选择--</option>

  </select>

</body>
</html>

AjaxServlet2.java

@WebServlet("/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException {
		
		//解决响应中文乱码
        resp.setContentType("text/html;charset=utf-8");
		
		//接受数据
        String val = req.getParameter("val");

        List<String>   list1=new ArrayList<>();
        list1.add("篮球");
        list1.add("足球");
        list1.add("乒乓球");

        List<String>   list2=new ArrayList<>();
        list2.add("抖音");
        list2.add("快手");
        list2.add("YY直播");


        List<String>   list3=new ArrayList<>();
        list3.add("炒饼");
        list3.add("炒面");
        list3.add("抄刀削");


        Map<String,List<String>>  map =new HashMap<>();
        map.put("1",list1);
        map.put("2",list2);
        map.put("3",list3);

        //用户响应的集合
        List<String> list = map.get(val);

        resp.getWriter().print(list);


    }
}

相关推荐