Ajax之二级联动

Ajax小练习：使用Ajax实现二级联动，具体代码如下：

HTML代码

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

    <select id="sel">
        <option value="0">--请选择--</option>
    </select>

JS代码

<script type="text/javascript">
    var xhr;
    function change(val) {
        //发送ajax请求
        //[1]创建XMLHttpRequest对象
        xhr = new XMLHttpRequest();
        //[2]和服务器建立连接,参数1：提交方式,参数2：url,参数3:是否异步
        xhr.open("GET","Ajax?val="+val,true);
        //[3]进行回调函数
        xhr.onreadystatechange=process;
        //[4]发送数据,get方式send参数为null
        xhr.send(null);
    }
    function process() {
        if(xhr.readyState==4&&xhr.status==200){
            var list = xhr.responseText;
            //截取子串
            var list2 = list.substring(1,list.length-3);
            //以','分割字符串
            var list3 = list2.split(",");
            //清空选择框内容
            document.getElementById("sel").innerHTML="<option>--请选择--</option>";
            //遍历集合
            for(var i in list3){
                document.getElementById("sel").innerHTML +="<option>"+list3[i]+"</option>";
            }
        }
    }
</script>

Servlet代码

@WebServlet("/Ajax")
public class AjaxServlet 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("水煮肉片");
        //直播类型
        List<String> list3 = new ArrayList<>();
        list3.add("虎牙");
        list3.add("YY直播");
        list3.add("b站");

        //将以上三种类型发入Map集合中存取更方便
        Map map = new HashMap();
        map.put("1",list1);
        map.put("2",list2);
        map.put("3",list3);

        //响应数据到页面
        resp.getWriter().print(map.get(val));
    }
}

二级联动结果如下图：

 

小结：二级联动实现的关键就是onchange事件，将选中<option>的value传递到Servlet,Servlet将结果在响应到页面，将集合进行遍历显示。