Ajax实现二级联动

2021-05-09 14:01:55 阅读：112 来源： 互联网

标签：二级 val map -- add xhr Ajax 联动 var

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);


    }
}

标签：二级,val,map,--,add,xhr,Ajax,联动,var
来源： https://blog.csdn.net/qq_53609683/article/details/116564021

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ajax实现二级联动