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.ajax向后台传递数组问题的解决方法
May 12 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php检测文本的编码
2015/07/26 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
python版本的读写锁操作方法
2016/04/25 Python
详解K-means算法在Python中的实现
2017/12/05 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
《北大荒的秋天》教学反思
2014/04/14 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
物业工程部岗位职责
2015/02/11 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers
关于Redis的主从复制及哨兵问题
2022/06/16 Redis