快捷導(dǎo)航

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

更新時間：2018年08月08日 14:28:12 作者：dream_heheda

今天小編就為大家分享一篇jQuery AJAX 方法success()后臺傳來的4種數(shù)據(jù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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"，執(zhí)行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)可以接收各種參數(shù)，url，data(名稱匹配或@RequestBody)
(3)返回值類型就是基本類型*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public long editArea() {
 //處理參數(shù)
 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)可以接收參數(shù)
 (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("不能給一個傳感器添加重復(fù)設(shè)備");
  }
  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是該下路下的所有區(qū)間（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; //曲線的縱坐標(biāo) 
 private List<Date> occurTime; //曲線的橫坐標(biāo) 
 //添加get set方法 
}

第二步：js代碼

 $.ajax({
   url : "/dataRecord/chart" , //獲取數(shù)據(jù)列 
   type : 'GET',
   data : {
   },
   success : function(data) { 
    formatStringToJson(data);//對數(shù)據(jù)進(jìn)行處理
   }
  });

 function formatStringToJson(data) {

  jsonData = JSON.parse(data); //把后臺傳來的數(shù)據(jù)轉(zhuǎn)來JSON格式
  //jsonData是二維數(shù)組，因為實體類ChartSeries的字段data也是個list
  for (x in jsonData) { //遍歷JSON格式的數(shù)組取元素, x代表下標(biāo)

   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
}

后臺傳來的數(shù)據(jù)格式如下