Vue axios异步获取后台数据alert提示undefined
记录一个小问题,关于分页查询套餐
前台通过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的更多相关文章
- easyui panel异步获取后台数据在前台显示
我在使用easyui的时候,想做一个向下图所示的效果,这个panel的样式已经做好了,想从后台异步获取json数据,然后填入到文本框中,不知道哪位大神能给点指导?万分感谢! 放入表单中,使用form对 ...
- vue中如何获取后台数据
原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...
- 073——VUE中vuex之使用actions和axios异步初始购物车数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 使用 axios post请求后台数据时 404
今天遇到Vue 使用 axios post请求后台数据时 404 使用postman 就能获取到 网上找了大半天 终于找到了解决方法,传送门:https://www.jianshu.com/p/b10 ...
- Ajax异步获取html数据中包含js方法无效的解决方法
页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?met ...
- 用ajax获取后台数据,返回json数据,怎么在前台使用?
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
随机推荐
- MyBatis 使用 foreach 批量插入
MyBatis 使用 foreach 批量插入 参考博文 老司机学习MyBatis之动态SQL使用foreach在MySQL中批量插入 使用MyBatis一次性插入多条数据时候可以使用 <for ...
- webapi添加basic认证
BasicAbstractAuthorize:抽象类,子类中校验用户名密码,并创建Principal BasicAuthorize:实现类 //base.OnAuthorization(),此方法 ...
- MySQL中DELETE子句与TRUNCATE TABLE语句的区别
TRUNCATE语句删除表数据的语法格式:即,table 这个词可要,可不要 TRUNCATE TABLE 表名; TRUNCATE 表名; 1,使用truncate语句后,表中的auto_incre ...
- 知识点总结 VUE部分
1.v-show和v-if的区别 v-show 操作的是元素的display属性 v-if 操作的是元素的创建和插入 v-if有更高的开销,而v-show有更高的初始渲染开销,如果需要非常频繁的切换, ...
- Nginx与安全有关的几个配置
Nginx与安全有关的几个配置 原创: 37丫37 运维咖啡吧 昨天 安全无小事,安全防范从nginx配置做起 上一篇文章<Nginx的几个常用配置和技巧>收到了不错的反馈,这里再总结下n ...
- vue项目中npm安装sass,less,stylus
用vue-cli脚手架搭建出来的,默认是用标准css的.如果你想用sass,less,stylus就需要自己手动安装一下了. 进入项目文件夹,然后安装(这里以stylus为例)stylus和stylu ...
- PKUWC2020游记
PKUWC2020在2019年举行是真的沙雕 晚个两星期我就能逃掉期末考了 Day \(-\infty\) 开始停课训练,和ntf.lzy一起. atcoder真好玩,只可惜我没脑子-- kenkoo ...
- Java判断Integer类型的值是否相等
我们知道Integer是int的包装类,在jdk1.5以上,可以实现自动装箱拆箱,就是jdk里面会自动帮我们转换,不需要我们手动去强转,所以我们经常在这两种类型中随意写,平时也没什么注意 但Integ ...
- 【网络知识之六】UDP
UDP(User Datagram Protocol)用户数据报协议,是一种无连接的传输层协议,提供面向事务的简单不可靠信息传送服务. 一.UDP报头UDP报头由4个部分组成,其中两个是可选的(粉红背 ...
- vscode java
https://devblogs.microsoft.com/visualstudio/announcing-visual-studio-code-java-installer/ public cla ...