全国报名热线

15201841284

jQuery AJAX 方法 success()后台传来的4种数据

时间:2018-01-22 20:08:42   来源:dreamstar   阅读:

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);
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

java代码

/*
 * (1)不能有注解@RespoonseBody 
 * (2)返回值类型是String,代表页面所在的文件夹
 * (3)如果返回"error",执行ajax的error方法
 */
@RequestMapping(value = "area/prepareCreate", method = RequestMethod.POST)
public String editAreaWithFile() {
    return "area/create;
    // return "error";
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

java代码

/**(1)用@ResponseBody注解
(2)可以接收各种参数,url,data(名称匹配或@RequestBody)
(3)返回值类型就是基本类型*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public long editArea() {
    //处理参数
    return 3;   
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3. 后台返回一个实体类

第一步:定义一个实体类

/**
 * flag为1 :操作失败
 * msg:失败原因;
 * flag为0: 操作成功*/
public class AjaxResponseMsg {
    private int flag;
    private String msg; 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

第二步: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);  
        }
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

第三步: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; // 返回给前台一个实体类,包括是否操作成功,及失败原因
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

4.后台返回一个实体类list(实体类的字段都是基本类型)

实体类

public class Section{
    private Long id; //id
    private String name; //名称          
}
  • 1
  • 2
  • 3
  • 4

前台

$.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);                    
        }

    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

后台

@ResponseBody
@RequestMapping("/section/getSections")
@RequiresPermissions("section:view")
public List
getSections() { List
sections = new List
(); return sections; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

5.后台返回一个实体类list(实体类的字段包括List类型)

第一步:定义实体类ChartSeries

public class ChartSeries {
    private String name; //曲线名称     
    private List data; //曲线的纵坐标 
    private List occurTime; //曲线的横坐标 
    //添加get set方法    
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

第二步: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]);
            }

        }


    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

第三步:java代码

@ResponseBody
@RequiresPermissions("dataRecord:view")
@RequestMapping(value = "/dataRecord/chart}", method = RequestMethod.GET)
public List getChart(){         
    List list =  new List();
    //给list赋值
    return list; // list
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

后台传来的数据格式如下 
这里写图片描述

原文:http://blog.csdn.net/AnyBisks/article/details/79126726

分享:0