1. 程式人生 > >jQuery ajax方法success()中後臺傳來的四種數據類型

jQuery ajax方法success()中後臺傳來的四種數據類型

water eth series 如果 response xms sync get creat

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.後臺返回一個實體類

  (1)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;
}

  (2)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
}

後臺傳來的數據格式如下
技術分享圖片

jQuery ajax方法success()中後臺傳來的四種數據類型