天天看點

利用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";

}

結果:

利用ajax與springmvc互動,Springmvc和ajax實作前後端互動的方法
利用ajax與springmvc互動,Springmvc和ajax實作前後端互動的方法

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

}

結果:

利用ajax與springmvc互動,Springmvc和ajax實作前後端互動的方法
利用ajax與springmvc互動,Springmvc和ajax實作前後端互動的方法

看完上述内容,是不是對Springmvc和ajax實作前後端互動的方法有進一步的了解,如果還想學習更多内容,歡迎關注億速雲行業資訊頻道。