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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
phpize的深入理解
2013/06/03 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
定义select的边框颜色
2008/04/28 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python多项式回归的实现方法
2019/03/11 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
学校端午节活动方案
2014/08/23 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书