jQuery AJAX 方法success()后臺傳來的4種數據詳解

2019-11-19 13:18:40

字體：大中小

來源：轉載

供稿：網友

1.后臺返回一個頁面

js代碼

/**(1)用$("#content-wrapper").html(data);顯示頁面*/$.ajax({ async : false, cache : false, type : 'POST', url : 'area/prepareCreate', error : function() {  alert('smx失敗 '); }, success : function(data) {  $("#content-wrapper").html(data); }});

java代碼

/* * (1)不能有注解@RespoonseBody  * (2)返回值類型是String,代表頁面所在的文件夾 * (3)如果返回"error"，執行ajax的error方法 */@RequestMapping(value = "area/prepareCreate", method = RequestMethod.POST)public String editAreaWithFile() { return "area/create; // return "error";}

2. 后臺返回一個基本類型String,Long等

js代碼

$.ajax({ async : false, cache : false, type : 'POST', url : 'app/area/delete', dataType : "json", error : function() {  alert('smx失敗 '); }, success : function(data) { /**重點：前臺接收到返回值，直接處理就行*/  alert(data); }});

java代碼

/**(1)用@ResponseBody注解(2)可以接收各種參數，url，data(名稱匹配或@RequestBody)(3)返回值類型就是基本類型*/@ResponseBody@RequestMapping(value = "area/delete", method = RequestMethod.POST)public long editArea() { //處理參數 return 3; }

3. 后臺返回一個實體類

第一步：定義一個實體類

/** * flag為1 :操作失敗 * msg：失敗原因； * flag為0: 操作成功*/public class AjaxResponseMsg { private int flag; private String msg; }

第二步：js代碼

$.ajax({ async : false, cache : false, type : 'POST', url : 'app/area/delete', error : function() {  alert('smx失敗 '); }, success : function(data) {   var jsonData = JSON.parse(data);     if (jsonData .flag == 0) {//請求成功   alert("后臺操作成果");   } else {   alert(jsonData .msg);   } }});

第三步：java代碼

 /**（1）添加注解@ResponseBody (2)可以接收參數 (3)返回類型就是實體類*/ @ResponseBody @RequestMapping(value = "area/delete", method = RequestMethod.POST) public AjaxResponseMsg editAreaWithFile() {  // 做操作  boolean result = true  AjaxResponseMsg ajaxMsg = new AjaxResponseMsg();  if (result == true)   ajaxMsg.setFlag(0);  else {   ajaxMsg.setFlag(1);   ajaxMsg.setMsg("不能給一個傳感器添加重復設備");  }  return ajaxMsg; // 返回給前臺一個實體類，包括是否操作成功，及失敗原因 }

4.后臺返回一個實體類list（實體類的字段都是基本類型）

實體類

public class Section{ private Long id; //id private String name; //名稱   }

前臺

$.ajax({ async : false, cache : false, type : 'POST', url : "section/getSections", error : function() {  alert("失敗"); }, success : function(data) {  var jsonData = JSON.parse(data); //jsonData是該下路下的所有區間（json格式）   for (var i = 0; i < jsonData.length; i++) {   alert(jsonData[i].id);   alert(jsonData[i].name);       } }})

后臺

@ResponseBody@RequestMapping("/section/getSections")@RequiresPermissions("section:view")public List<Section> getSections() { List<Section> sections = new List<Section>(); return sections;}

5.后臺返回一個實體類list（實體類的字段包括List類型）

第一步：定義實體類ChartSeries

public class ChartSeries { private String name; //曲線名稱   private List<Float> data; //曲線的縱坐標  private List<Date> occurTime; //曲線的橫坐標  //添加get set方法 }

第二步：js代碼

 $.ajax({   url : "/dataRecord/chart" , //獲取數據列    type : 'GET',   data : {   },   success : function(data) {     formatStringToJson(data);//對數據進行處理   }  }); function formatStringToJson(data) {  jsonData = JSON.parse(data); //把后臺傳來的數據轉來JSON格式  //jsonData是二維數組，因為實體類ChartSeries的字段data也是個list  for (x in jsonData) { //遍歷JSON格式的數組取元素, x代表下標   for (y in jsonData[x].data) {         alert(jsonData[x].occurTime[y]) ;//依次獲取      alert(jsonData[x].data[y]);   }  } }

第三步：java代碼

@ResponseBody@RequiresPermissions("dataRecord:view")@RequestMapping(value = "/dataRecord/chart}", method = RequestMethod.GET)public List<ChartSeries> getChart(){    List<ChartSeries> list = new List<ChartSeries>(); //給list賦值 return list; // list}

后臺傳來的數據格式如下