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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
Laravel实现表单提交
2017/05/07 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python程序封装为win32服务的方法
2021/03/07 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python批量解压zip文件的方法
2019/08/20 Python
详解Python设计模式之策略模式
2020/06/15 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
医学生个人求职信范文
2014/02/07 职场文书
学生评语大全
2014/04/18 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
交通安全教育主题班会
2015/08/12 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android