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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery实现放大镜案例
Oct 19 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
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
总经理岗位职责
2013/11/09 职场文书
委托公证书
2014/04/08 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
MYSQL 运算符总结
2021/11/11 MySQL
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android