1. 程式人生 > 程式設計 >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<Integer> array){
  for (int i : array) {
    System.out.println(i);
  }
  return "success";
}

結果:

Springmvc和ajax如何實現前後端互動

Springmvc和ajax如何實現前後端互動

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

結果:

Springmvc和ajax如何實現前後端互動

Springmvc和ajax如何實現前後端互動

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。