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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

这里使用Jackson: [https://www.yiibai.com/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][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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190426104444561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[https_www.yiibai.com_jackson]: https://www.yiibai.com/jackson
[https_mvnrepository.com_artifact_com.fasterxml.jackson.core]: https://mvnrepository.com/artifact/com.fasterxml.jackson.core
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190426104902548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70