文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

这篇文章主要介绍了怎么用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实现后台传数据”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯