总结之下拉列表级联操作（二）——$ajax与后台交互获取json数据

后台使用Servlet通过gson把对象集合生成json字符串传给页面
模型：第一级是相册名，第二级是图片名，图片根据相册id获取图片对象

Servlet代码

@WebServlet(name = "AlbumServlet",urlPatterns = {"/album"})
public class AlbumServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                AlbumService albumService = new AlbumServiceImpl();
                List<Album> list = albumService.getAlbumsByUserId(1);
                System.out.println(list);
                Gson gs = new Gson();
                String objectStr = gs.toJson(list);
                System.out.println("把相册对象转为json格式的字符串///" + objectStr);
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write(objectStr);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

@WebServlet(name = "PhotoServlet",urlPatterns = {"/photo"})
public class PhotoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String albumId =request.getParameter("albumId");
            PhotoService photoService =new PhotoServiceImpl();
            List<Photo> list =photoService.getPhotosByAlbumId(Integer.valueOf(albumId));
            System.out.println(list);
            Gson gs = new Gson();
            String objectStr = gs.toJson(list);
            System.out.println("把对象转为json格式的字符串///" + objectStr);
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(objectStr);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
    }
}

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

JQuery一些功能

下拉列表发生了变化（选中的选项改变）

$("#select1").change(function () {
}

把json字符串转换成对象集合

 mydata =eval(data);

遍历对象集合

 $.each(mydata,function(i,ablum){
 });

添加一个option并且给它的文本和value赋值

 var $option=$("<option></option>");
                        $option.val(ablum.albumId);
                        $option.text(ablum.albumName);
                        $("#select1").append($option);

获取第一级select被选中的option的值
第一种方法:

$("#select1").find("option:selected").val()

  第二种方法

$("#select1 > option:selected").val();
//意思是在id select1的元素下查找option元素 条件是selected被选中

页面整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
相册名：<select id="select1">

</select><br>
图片名：<select id="select2">

</select><br>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
    $(function () {


        //ajax应用
        $.ajax({
            type: 'post',//传输方法通常get和post
            url: "album",//Servlet请求路径
            data:null,//向后台传输的数据
            dataType: "json",//数据格式通常text，json，xml
            success: function (data) {//ajax请求成功后，后台返回的数据

                mydata =eval(data);

                    $.each(mydata,function(i,ablum){
                        //var option = "<option>"+ablum.albumName+"</option>";
                        var $option=$("<option></option>");
                        $option.val(ablum.albumId);
                        $option.text(ablum.albumName);
                        $("#select1").append($option);
                    });
                }

                //     var option = '<option value="bj">'+"东京"+'</option>'
            // $("#select1").append(option);

        });
        $("#select1").change(function () {

            //alert($("#select1").find("option:selected").val());
            $.ajax({
                type: 'post',//传输方法通常get和post
                url: "photo",//Servlet请求路径
                data: {albumId: $("#select1 > option:selected").val()},//向后台传输的数据
                dataType: "json",//数据格式通常text，json，xml
                success: function (data) {//ajax请求成功后，后台返回的数据
                    $("#select2").empty();
                     mydata = eval(data);
                    $.each(mydata, function (i, photo) {
                        //alert(i)
                       /* var option = '<option value="bj">' + photo.photoName + '</option>'*/
                        var $option=$("<option></option>");
                        //$option.val(ablum.albumId);
                        $option.text(photo.photoName);
                        alert($option.text());
                        $("#select2").append($option);
                    });
                }

                // var option = '<option value="bj">'+"东京"+'</option>'
                // $("#select1").append(option);

            });
        });

    })
</script>
</body>
</html>

总结之下拉列表级联操作（二）——$ajax与后台交互获取json数据

JQuery一些功能

页面整体代码

猜你喜欢