最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery AJAX 方法success()后台传来的4种数据详解

来源:懂视网 责编:小采 时间:2020-11-27 22:10:23
文档

jQuery AJAX 方法success()后台传来的4种数据详解

jQuery AJAX 方法success()后台传来的4种数据详解:1.后台返回一个页面 js代码 /**(1)用$(#content-wrapper).html(data);显示页面*/ $.ajax({ async : false, cache : false, type : 'POST', url : 'area/prepareCreate', error : function() { alert
推荐度:
导读jQuery AJAX 方法success()后台传来的4种数据详解:1.后台返回一个页面 js代码 /**(1)用$(#content-wrapper).html(data);显示页面*/ $.ajax({ async : false, cache : false, type : 'POST', url : 'area/prepareCreate', error : function() { alert

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种数据详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

jQuery AJAX 方法success()后台传来的4种数据详解

jQuery AJAX 方法success()后台传来的4种数据详解:1.后台返回一个页面 js代码 /**(1)用$(#content-wrapper).html(data);显示页面*/ $.ajax({ async : false, cache : false, type : 'POST', url : 'area/prepareCreate', error : function() { alert
推荐度:
标签: 后台 ajax jQuery
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top