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

 更新时间:2018年08月08日 14:28:12   转载 作者:dream_heheda  
今天小编就为大家分享一篇jQuery AJAX 方法success()后台传来的4种数据详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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
}

后台传来的数据格式如下

以上这篇jQuery AJAX 方法success()后台传来的4种数据详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery过滤选择器:not()方法使用介绍

    jQuery过滤选择器:not()方法使用介绍

    这篇文章主要介绍了jQuery过滤选择器:not()方法的使用,需要的朋友可以参考下
    2014-04-04
  • jQuery实现手机版页面翻页效果的简单实例

    jQuery实现手机版页面翻页效果的简单实例

    下面小编就为大家带来一篇jQuery实现手机版页面翻页效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 使用jQuery的easydrag插件实现可拖动的DIV弹出框

    使用jQuery的easydrag插件实现可拖动的DIV弹出框

    EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。接下来通过本文给大家介绍使用jQuery的easydrag插件实现可拖动的DIV弹出框,感兴趣的朋友一起学习吧
    2016-02-02
  • 2012年开发人员的16款新鲜的jquery插件体验分享

    2012年开发人员的16款新鲜的jquery插件体验分享

    jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML;使用这些插件方法可以创建高效强大的网页和Web程序
    2012-12-12
  • jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法

    jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。最近在使用jquery.form.js提交包含文件的表单时,当碰上网速较慢时,而我们又设置了timeout时我们的页面会死在这里,怎么回事呢,下面脚本之家小编给大家解答下
    2016-10-10
  • 深入学习jQuery中的data()

    深入学习jQuery中的data()

    大家应该都会有这样一种感觉,data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。下面就来详细深入的学习下jQuery中的data(),感兴趣的朋友们可以参考借鉴。
    2016-12-12
  • jquery实现静态搜索功能(可输入搜索文字)

    jquery实现静态搜索功能(可输入搜索文字)

    本文主要介绍了jquery实现静态搜索功能的示例代码,可通过输入搜索文字进行筛选信息。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • jquery马赛克拼接翻转效果代码分享

    jquery马赛克拼接翻转效果代码分享

    这篇文章主要介绍了jquery马赛克拼接翻转效果,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • jQuery获取样式中的背景颜色属性值/颜色值

    jQuery获取样式中的背景颜色属性值/颜色值

    天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome、Firefox中则是以GRB格式显示rgb(255,0,0),由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的)。搜索了一下,从国外的一个网站上得到一段代码
    2012-12-12
  • jQuery实现立体式数字滚动条增加效果

    jQuery实现立体式数字滚动条增加效果

    这篇文章主要介绍了jQuery立体式数字滚动条增加的相关资料,代码简单易懂,非常不错,需要的朋友可以参考下
    2016-12-12

最新评论