利用ajax与springmvc交互,Springmvc和ajax实现前后端交互的方法

Springmvc和ajax实现前后端交互的方法

发布时间：2020-07-28 15:36:16

来源：亿速云

阅读：75

作者：小猪

这篇文章主要讲解了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 subjectList;

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.log(response);

}

}

);

});

});

后端：

@ResponseBody

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

public String testComposeObject(@RequestBody Student student){

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

return "success";

}

结果：

看完上述内容，是不是对Springmvc和ajax实现前后端交互的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。