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


Posted in jQuery onAugust 08, 2018

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 AJAX 方法success()后台传来的4种数据详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 #jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
python删除特定文件的方法
2015/07/30 Python
解析Python中while true的使用
2015/10/13 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
医学专业大学生求职信
2014/07/12 职场文书
法定代表人证明书
2014/11/28 职场文书
入党现实表现材料
2014/12/23 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang