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; }