欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 17:28:54
1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async...

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