SpringMVC05 使用ajax和json

本文写的东西都是基于前几次写的springMVC的笔记。

使用ajax和json除了springmvc的jar包以外还需要以下3个包

        jackson-annotations-2.5.4.jar

        jackson-core-2.5.4.jar

        jackson-databind-2.5.4.jar

附下载地址：http://repo1.maven.org/maven2/com/fasterxml/jackson/core/

本例使用的是2.5.4版本

 

在使用json之前还需要在springmvc的xml中配置json转换器

 

springmvc.xml

<!-- 将对象转换成json -->       <!-- StringConver配置 -->       <bean id="stringConverter" class="org.springframework.http.converter.StringHttpMessageConverter">          <property name="supportedMediaTypes">             <list>                 <value>text/plain;charset=UTF-8</value>             </list>          </property>       </bean>       <!-- jsonConver配置 -->       <bean id="jsonConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>       <!-- 适配器引用StringConver和jsonConver  -->       <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">          <property name="messageConverters">             <list>                 <ref bean="stringConverter"/>                 <ref bean="jsonConverter"/>             </list>          </property>       </bean>

配置好之后就可以开始写下面的代码了

 

1. 1创建一个对象

package com.entity; public class User {   private String name;   private int age;   private String sex;   get set方法略

1. 2controller类

@RequestMapping("/json")    @ResponseBody    public List<User> getUser(){       List list=new ArrayList<User>();       list.add(new User("小明", 16, "男"));       list.add(new User("小红", 11, "女"));       list.add(new User("张三", 13, "男"));       list.add(new User("李四", 18, "男"));       return list;    }

 

1. 3jsp界面

<input type="button" value="获取数据" id="btn" >       <hr>       <table style="width: 50%; text-align: center;">          <tr>             <td>姓名</td>             <td>年龄</td>             <td>性别</td>          </tr>          <tbody id="tbody"></tbody>       </table>

1. 4javascript部分（jQuery随便找一个）

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript">    $(function () {       $("#btn").click(function() {          $.post("json.html",function(data){             var html="";             for(var i=0;i<data.length;i++){                html+="<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td><td>"+data[i].sex+"</td></tr>";             }             $("#tbody").html(html);          });       });    }); </script>

 

1. 5测试

单击前：

单击后：

总结：后台数据在UI层上显示在使用Json后变得非常的爽快，可以直接将对象封装到数组中在前端使用。与session相比这样避免了服务器中存放大量session有效的节约了服务器资源。

以上都是个人学习经验，有不对的地方欢迎指正。