记录一个小问题,关于分页查询套餐

前台通过axios异步请求获取后台数据alert弹出数据提示undefined

下面有三个bean

PageResult 
/**
* 分页结果封装对象
*/
public class PageResult implements Serializable {
//总记录数
private Long total;
//当前页结果
private List rows;
//get,set方法省略
  ....
}
QueryPageBean 
/**
* 封装查询条件
*/
public class QueryPageBean implements Serializable {
//页码
private Integer currentPage;
//每页记录数
private Integer pageSize;
//查询条件
private String queryString; //get,set方法省略
   ....
}
Result 
/**
* 封装返回结果
*/
public class Result implements Serializable {
//执行结果,true为执行成功 false为执行失败
private boolean flag;
//返回结果信息,主要用于页面提示信息
private String message;
//返回数据
private Object data;
//get,set方法省略
  ....
}

Controller层

    //返回给前台的是一个Result对象
   @RequestMapping("/findSetmeal")
public Result findSetmeal(@RequestBody QueryPageBean queryPageBean) {
try {
       //service层返回的是一个PageResult对象
PageResult page = setmealService.findPage(queryPageBean);
return new Result(true, MessageConstant.QUERY_SETMEALLIST_SUCCESS, page);
} catch (Exception e) {
return new Result(false, MessageConstant.QUERY_SETMEALLIST_FAIL);
}
}

前台,获取后台数据alert提示undefined,红色代码为错误示例,由于返回的是一个Result对象,Result对PageResult又进行了封装

            //分页查询
findPage() {
//设置参数
var param = {
currentPage: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString,
};
axios.post("/setMeal/findPage.do", param).then((response) => {
// alert(response.data.flag);
// alert(response.data.total);
// alert(response.data.rows);
this.dataList = response.data.rows;
this.pagination.total = response.data.total;
this.dataList = response.data.data.rows;
this.pagination.total = response.data.data.total;
})
},

Vue axios异步获取后台数据alert提示undefined的更多相关文章

  1. easyui panel异步获取后台数据在前台显示

    我在使用easyui的时候,想做一个向下图所示的效果,这个panel的样式已经做好了,想从后台异步获取json数据,然后填入到文本框中,不知道哪位大神能给点指导?万分感谢! 放入表单中,使用form对 ...

  2. vue中如何获取后台数据

    原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...

  3. 073——VUE中vuex之使用actions和axios异步初始购物车数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue 使用 axios post请求后台数据时 404

    今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法,传送门:https://www.jianshu.com/p/b10 ...

  5. Ajax异步获取html数据中包含js方法无效的解决方法

    页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?met ...

  6. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  7. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  8. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  9. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

随机推荐

  1. echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式

    Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. 生鲜超市项目错误及解决办法(crispy_forms、外键指向自己、class嵌套访问父类、meta类及各种字段参数)

    为什么要在INSTALLED_APPS中加入crispy_forms? 因为django-crispy-forms 是对django form在html页面呈现方式进行管理的一个第三方插件. 为什么有 ...

  3. AutoResetEvent介绍及使用场景

    AutoResetEvent 允许线程通过发信号互相通信.通常,此通信涉及线程需要独占访问的资源. 线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号.如果 AutoRese ...

  4. alarm()函数的使用总结

    alarm()函数说明 1.引用头文件:#include <unistd.h>; 2.函数标准式:unsigned int alarm(unsigned int seconds); 3.功 ...

  5. 【UVA1303】Wall(凸包)

    点此看题面 大致题意: 给你一个多边形,要求建一面墙使得墙上的点至少离多边形每个顶点\(R\)的距离,求最短的墙长. 考虑\(R=0\) 考虑当\(R=0\)时,所求的答案显然就是求得的凸包的周长. ...

  6. [LeetCode] 92. Reverse Linked List II 倒置链表之二

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  7. Python3.6 SyntaxError: 'ascii' codec can't decode byte 0xe5 in position 7: ordinal not in range(128)

    Django项目上线之后,死活无法正常运行(本地正常) 开始排查了好久才发现是字符编码问题 前面的小坑基本有一些,好(我)解(忘)决(了). 不好解决的是这个报错: SyntaxError: 'asc ...

  8. GreenPlum 大数据平台--基础使用(二)

    连接参数 连接参数 描述 环境变量 应用名称 连接到数据库的应用名称,保存在application_name连接参数中.默认值是psql. $PGAPPNAME 数据库名 用户想要连接的数据库名称.对 ...

  9. ubutun16.04 安装编译glog日志库

    glog 是一个 C++ 日志库,它提供 C++ 流式风格的 API.在安装 glog 之前需要先安装 gflags,这样 glog 就可以使用 gflags 去解析命令行参数(可以参见gflags ...

  10. kafka压测

    原文并未提及kafka的版本 并且测试的消息大小都偏小  测试数据供参考 原文还测试了broker等    原文请移步文章末尾 4.1 producer测试 4.1.1 batch-size 测试结果 ...