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

最新推荐文章于 2024-09-03 01:23:13 发布

凌冰_

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量1.2k

点赞数

分类专栏： JSON

本文链接：https://blog.csdn.net/hlx20080808/article/details/89533465

版权

JSON 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

这里使用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

注意：工程引入后，再加入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>