使用jQuery实现Ajax 列表数据显示 (一）-蒲公英云

使用jQuery实现Ajax 列表数据显示 (一）

短命女 2023-10-18 17:42 165阅读 0赞

从集合中取出数据显示到JSP页面中，使用jQuery实现Ajax，返回JSON的数据格式哦！

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70

这里使用Jackson: https://www.yiibai.com/jackson

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。Jackson所依赖的jar包较少，简单易用并且性能也要相对高些，并且Jackson社区相对比较活跃，更新速度也比较快。

需要下载这些包： https://mvnrepository.com/artifact/com.fasterxml.jackson.core

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1

注意：工程引入后，再加入Tomcat中lib;

servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //list collection
        List<Student> list=new ArrayList<>();
        //add list
        list.add(new Student("mike","男",20));
        list.add(new Student("张三","男",19));
        list.add(new Student("boy","男",22));
        list.add(new Student("菲尔","女",17));
        //json
        ObjectMapper om=new ObjectMapper();
        //将集合对象转成字符串
        String str=om.writeValueAsString(list);
        System.out.println(str);
        out.println(str);
        out.flush();
        out.close();
    }

JSP

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" >
    $(function () {
        $("#btn").click(function () {
            //json数据
            $.getJSON("show",function (data) {
                //获得是数组
                $.each(data,function(index,ele){
                   // alert(ele.name+"\n"+ele.sex+"\n"+ele.age);
                    $("#ul").append("<li>"+ele.name+"-"+ele.sex+"-"+ele.age+"</li>");
                })
            })
        })
    })
</script>
<body>
<h1>jackJSON</h1>
<button id="btn">显示数据</button>
<ul id="ul"></ul>
</body>