温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用jQuery AJAX实现后台传数据

发布时间:2022-03-05 10:40:08 来源:亿速云 阅读:205 作者:iii 栏目:web开发

这篇文章主要介绍了怎么用jQuery AJAX实现后台传数据的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用jQuery AJAX实现后台传数据文章都会有所收获,下面我们一起来看看吧。

  1.后台返回一个页面

  js代码

  $.ajax({

  async : false,

  cache : false,

  type : 'post',

  url : 'area/preparecreate',

  error : function() {

  alert('smx失败 ');

  },

  success : function(data) {

  $("#content-wrapper").html(data);

  }

  });

  java代码

  @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代码

  @responsebody

  @requestmapping(value = "area/delete", method = requestmethod.post)

  public long editarea() {

  //处理参数

  return 3;

  }

  3. 后台返回一个实体类

  第一步:定义一个实体类

  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代码

  @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 getsections() {

  list sections = new list();

  return sections;

  }

  5.后台返回一个实体类list(实体类的字段包括list类型)

  第一步:定义实体类chartseries

  public class chartseries {

  private string name; //曲线名称

  private list data; //曲线的纵坐标

  private list 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 getchart(){

  list list = new list();

  //给list赋值

  return list; // list

  }

关于“怎么用jQuery AJAX实现后台传数据”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么用jQuery AJAX实现后台传数据”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI