Springmvc和ajax如何实现前后端交互

Springmvc和ajax如何实现前后端交互

springmvc使用@RequestBody来获取前端的json字符串并转化为java对象

使用@ReponseBody来将返回的java对象转换为json形式返回前端

下面是几个使用springmvc和ajax进行前后端交互的简单实例

1.传递简单对象：

前端：

$(function(){

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

//准备好要发的数组

var array=[16,18,56];

var jsonArray=JSON.stringify(array);

$.ajax({

"url":"send/three/array.html",

"type":"post",

"data":jsonArray,

"dataType":"text",

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

"success":function (response) {

alert(response);

},

"error":function (response) {

alert(response);

}

}

);

});

});

后端：

@ResponseBody

@RequestMapping("/send/three/array.html")

public String testReceiveArrayThreee(@RequestBody List array){

for (int i : array) {

System.out.println(i);

}

return "success";

}

结果：

2.传递复杂对象:

1.实体类：

public class Student {

private Integer stuId;

private String studentName;

private Address address;

private List

private Map map;

get和set方法省略

}

public class Subject {

private String subjectName;

private Integer subjectScore;}

public class Address {

private String province;

private String city;

private String street;}

2.前端ajax:

$(function(){

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

//准备要发送的数据

var student={

"stuId":5,

"studentName":"tom",

"address":{

"province":"海南省",

"city":"海南市",

"street":"不知道"

},

"subjectList":[

{

"subjectName":"test",

"subjectScore":60

},

{

"subjectName":"ssm",

"subjectScore":70

}

],

"map":{

"k1":"v2",

"k2":"v3",

"k3":"v4"

}

};

//json对象转化为json字符串

var requestBody=JSON.stringify(student);

$.ajax({

"url":"send/compose/object.json",

"type":"post",

"data":requestBody,

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

"dataType":"json",

"success":function (response) {

console.log(response);

},

"error":function (response) {

console.http://log(response);

}

}

);

});

});

后端：

@ResponseBody

@RequestMapping("/send/compose/object.html")

public String testComposeObject(@RequestBody Student student){

System.out.println(student.tYZziVdpoString());

return "success";

}

结果：

private Map map;

get和set方法省略

}

public class Subject {

private String subjectName;

private Integer subjectScore;}

public class Address {

private String province;

private String city;

private String street;}

2.前端ajax:

$(function(){

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

//准备要发送的数据

var student={

"stuId":5,

"studentName":"tom",

"address":{

"province":"海南省",

"city":"海南市",

"street":"不知道"

},

"subjectList":[

{

"subjectName":"test",

"subjectScore":60

},

{

"subjectName":"ssm",

"subjectScore":70

}

],

"map":{

"k1":"v2",

"k2":"v3",

"k3":"v4"

}

};

//json对象转化为json字符串

var requestBody=JSON.stringify(student);

$.ajax({

"url":"send/compose/object.json",

"type":"post",

"data":requestBody,

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

"dataType":"json",

"success":function (response) {

console.log(response);

},

"error":function (response) {

console.http://log(response);

}

}

);

});

});

后端：

@ResponseBody

@RequestMapping("/send/compose/object.html")

public String testComposeObject(@RequestBody Student student){

System.out.println(student.tYZziVdpoString());

return "success";

}

结果：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。