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

小灰灰 2022-05-13 09:16 124阅读 0赞

*  后台使用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>