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解析获取JSON数据
Apr 08 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
漂亮但不安全的CTB
2006/10/09 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
javascript工具库代码
2012/03/29 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
javascript this详细介绍
2016/09/19 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
自动一体化专业求职信
2014/03/15 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis