QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 !
参考原文:https://blog.csdn.net/myppbird/article/details/85598154
Vue.js教程:http://www.runoob.com/vue2/vue-tutorial.html
Vue.js Ajax教程:http://www.runoob.com/vue2/vuejs-ajax.html
Vue.js文件引用
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
aspx.cs后台创建Ajax方法
[WebMethod]
public static dynamic getStuList()
{
StuWork.BLL.biz_students_info bll = new StuWork.BLL.biz_students_info();
DataTable dt = bll.GetListByPage("", "", 1, 2).Tables[0];
var count = 25;
var dnc= new
{
pageIndex = 1,
count,
data = bll.DataTableToList(dt)
};
return dnc;
}
JavaScript代码
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
fetchData:null,
},
methods: {
fetchData: function () {
this.stuShow = [];
this.$http.post("http://localhost:8008/biz_students_info/StuList.aspx/getStuList")
.then(response => {
console.info(response);
this.total = response.body.d.count;
this.stuShow = response.body.d.data;
}).catch(response => this.$alert(response.body.Message, "展示学生信息", { type: "error" }));
},
sizeChange: function (pageSize) {
this.pageSize = pageSize;
this.fetchData();
},
pageIndexChange: function (pageIndex) {
this.pageIndex = pageIndex;
this.fetchData();
}
}
});
}
</script>
显示结果