1. 程式人生 > >SpringMVC與頁面的json傳值方式:

SpringMVC與頁面的json傳值方式:

Index.html頁面:

<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

$(function() {

$("#btn2").click(function() {

jsonTest2();

})

$("#btn").click(function() {

jsonTest();

})

});

向頁面串值時,不要忘記加:contentType:"application/json;charset=utf-8",

function jsonTest2() {

$.ajax({

url : "/SpringMVC/jsonController/jsonTest2.action",

type : "post",

data : '{"t_user_id":"1","username":"張琳","userage":"12"}',

contentType:"application/json;charset=utf-8",

success : function(data) {

alert(data.username + ":" + data.userage);

}

});

}

function jsonTest() {

$.ajax({

url : "/SpringMVC/jsonController/jsonTest.action",

type : "post",

success : function(response) {

console.log(response);

$.each(response, function(i, v) {

alert(v.name + " : " + v.age);

});

}

});

</script>

<button type="button" id="btn2">點選再試試</button>

<button type="button" id="btn">點選試試</button>

Controller中:

匯入jackson相關的三個jar包:

<dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-core</artifactId>
     <version>2.9.7</version>
 </dependency>
 <dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-annotations</artifactId>
     <version>2.9.7</version>
 </dependency>
 <dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-databind</artifactId>
     <version>2.9.7</version>
 </dependency>

@Controller

@RequestMapping("/jsonController")

public class JsonController {

/*

 * 接收資料

 */

@ResponseBody

@RequestMapping("/jsonTest2")

public User test2(@RequestBody User user) {

userService.addUser(user);

System.out.println(user.toString());

return user;

}

/*

 * 查詢所有的使用者

 */

@ResponseBody

@RequestMapping("/jsonTest")

public List<Map<String, Object>> test() {

List<Map<String, Object>> userList = this.getUserList();

return userList;

}

}