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

原文地址:https://blog.csdn.net/dreamstar613/article/details/61913970

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
}

后台传来的数据格式如下  

原文地址:https://www.cnblogs.com/Vito-Yan/p/10153109.html

时间: 2024-10-07 00:15:15

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

jQuery ajax方法success()中后台传来的四种数据类型

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").

jQuery Ajax请求提交 后台getParameter接收不到数据

今天遇到的问题,总结一下 jQuery的$ajax({ contentType:"application/json",  //发送信息至服务器时内容编码类型. }) 这样的方式提交时,如果指定contentType为application/json:此时后台通过传统的getParameter("属性名")不能够获取前端传过来的数据, 此时需要 使用 http://blog.csdn.net/mhmyqn/article/details/25561535 这里的方法去

jquery ajax()方法传值乱码问题

 今天在用jquery.ajax()方法时,页面传的中文值到后台是乱码,后台总结了下解决这个问题有两个方法: 方法一: 用方法encodeURI() 后台不用做什么处理即可.我这的编码为UTF-8,如下所示: $.ajax({ url:"getIsAddWorkToday.action?1=1&workName="+encodeURI(empName), cache:false, type:"post", contentType:"text/h

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

再谈Jquery Ajax方法传递到action 【转载】

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://cnn237111.blog.51cto.com/2359144/984466 之前写过一篇文章Jquery Ajax方法传值到action,本文是对该文的补充. 假设 controller中的方法是如下: public ActionResult ReadPerson(PersonModel model)  {  string s = model.ToString();  ret

【转】jquery ajax 方法及各参数详解

在使用jquery的时候,我们经常用到jquery中对ajax的封装,下面对ajax函数的各参数详细说明和讲解,以便更好的理解和使用 $.get(url, data, callback,type) 和 $.post(url, data, callback, type). 1. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() 返回其创建的 XML

再谈Jquery Ajax方法传递到action(转)

之前写过一篇文章Jquery Ajax方法传值到action,本文是对该文的补充. 假设 controller中的方法是如下: public ActionResult ReadPerson(PersonModel model) { string s = model.ToString(); return Content(s); } public ActionResult ReadPersons(List<PersonModel> model) { string result = "&q

jQuery.ajax()方法中参数详细解析

前言 在项目开发中,为了实现异步向服务端发起请求,最经常使用的就是jQuery.ajax方法了.刚开始需求比较简单,调用jQuery.ajax方法时要传的参数也就那几个常见的参数:url/data/dataType/type/cache/timeout.当时感觉这个接口使用起来很简单,直到最近项目中要实现一个发送 formData数据到服务端的需求时,我发现自己错了....原来jQuery.ajax方法中除了我用过的那几个外,还有如此之多!!于是我决定要去jQuery官网好好看看都有哪些我不知道

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象