Springmvc和ajax如何實現前後端互動
阿新 • • 發佈:2020-05-07
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<Integer> 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<Subject> subjectList; private Map<String,String> 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","data":requestBody,"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"; }
結果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。