SSM12-Ajax和前台json的交互

1.要实现ssm下Ajax和后台j之间经过json进行交互，首先要ssm支持以json的数据方式发响应前台

2.jar包的支持（使用了jackson实现对象和JSON之间的转换）

　　　　　<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.5</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.5</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.5</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.module</groupId> <artifactId>jackson-module-jaxb-annotations</artifactId> <version>2.9.5</version> </dependency>

 3.jQuery的AJAX请求（详细参数见API）

<script> $(function () { $("#btn1").click(function () { /* alert("ok")*/ $.ajax({ type: "GET", url: "${pageContext.request.contextPath}/ajax", data: "name=hdh&age=12", dataType: "json", success: function (data) { alert("name:" + data.name + " " + "age:" + data.age); } }) }) }) </script>

4.后台须要接收ajax的参数并相应一个json对象给前台

 @RequestMapping("/json") @ResponseBody public User json(HttpServletResponse response) throws IOException { /*response.getWriter().write("123");*/ return new User("hdh", 12); }

5.AJAX携带参数的3中方式

ajax带参数提交的方式

1.直接拼接的方式 data: "name=hdh&age=12",

2.提交一个对象的方式 data: "name=hdh&age=12",

3.使用jquery的serialize()方法提交表单的数据 data: $("form").serialize(),

serialize():将表单中的数据序列化

var user={ username:"hdh", age:123 }

<form action="#" method="get" id="form"> <input type="text" name="name"> <input type="text" name="age"> </form> <input type="button" value="发送ajax" id="btn1">

 6.前台将对象转换为json传递给后台，后台接收json格式的对象

("#btn2").click(function () { //js中的json var user = { name: 'hdh', age: '12' } //object类型对象转化为json字符串  alert(JSON.stringify(user)) $.ajax({ type:"post", url:"${pageContext.request.contextPath}/ajax3", data:JSON.stringify(user), contextType:"application/json", success:function (data) { alert("name:" + data.name + " " + "age:" + data.age); } }) })

使用@request注解接受JSON格式的对象

@RequestMapping("/ajax3") @ResponseBody public User json3(@RequestBody User user) throws IOException { System.out.println(user); return user; }