ajax接收servlet的数据data,传入Layui的数据表格
ajax请求接收servlet的数据data,进行Layui数据表格渲染
*通过ajax传入请求到后台(DrinkServlet),从数据库拿到数据传回前端时。由于我之前学的Layui的初始化界面是这样的
//1.方法渲染
table.render({
elem:"#demo", //这个elem绑定的是容器的id,,与分页不同 这个要加井号
url:"js/11user.json", //数据接口,有后台写后台,这里写死一个json
cols:[[
{
field:'aa',type:"numbers"}, //开启序列号
{
field:'bb',type:"checkbox"}, //开启复选框
{
field:'id',title:'用户编号',sort:true,width:120}, //sort排序
{
field:'username',title:'姓名',width:100},
{
field:'sex',title:'性别',width:100},
{
field:'city',title:'城市',width:100},
{
field:'sign',title:'签名'},
{
field:'操作',toolbar:"#barDemo"} //设置头部工具栏
]],
page:true, //开启分页
toolbar:"#toolbarDemo" //设置表格工具栏
});
*由于这里用的数据是现成的json对象,所以url直接取的"js/11user.json",但是我这个项目要取ajax传回的数据,此时就不用再调url了,直接在参数中加一项data,调用ajax传过来的data即可。
*另外由于layui有自己独特的数据格式,ajax传过来的数据要通过parseData参数进行解析。
js代码如下
<script type="text/javascript">
$(function(){
//【展示全部信息】
$.ajax({
type:"post",
dataType:"json",
url:"DrinkServlet",
success:function(data,status){
var d = data;
layui.use(['form','jquery','table','layer'],function(){
var form = layui.form;
var $ = layui.jquery;
var table = layui.table;
var layer = layui.layer;
table.render({
elem:"#dataTable",
data:d,
cols:[[
...
]],
parseData: function(d) {
//res 即为原始返回的数据
return {
"code": 0, //解析接口状态
"msg": "", //解析提示文本
"count": 100, //解析数据长度
"data": d //解析数据列表
}
}
});
});
}
});
});
</script>
「其他文章」
- 测试相关知识点梳理
- 如何使用Sublime Text3搭建C语言开发环境
- Handler源码学习记录(java层、native层)
- 由Hadoop驱动的原始大数据时代已于2019年6月结束…….858
- 2021 年 ICT 行业预测
- Android 基于agora 视频会议开发
- 【Linux37-1】saltstack自动化运维(master与minion 远程测试 .sls文件 modules grains jinja模板)
- 我的第一篇博客
- Docker读书笔记_2021-01-17
- 无限重置idea试用期过期时间插件 简单方便 亲测可用
- 第七周作业
- 万宝综述高低切换科技卡位
- ajax接收servlet的数据data,传入Layui的数据表格
- docker 创建mongodb 容器 映射本地数据目录和配置文件
- 入门Prometheus监控系统之基础概念和Metric
- Swagger在header中添加token
- 阿里 10 年:一个普通技术人的成长之路
- 前端学习(2736):重读vue电商网站46之执行build 时报错
- 利用Raspberry PI和Tensorflow创建 智能婴儿监视器 - 知乎
- 三种类型的人员定位方案优优缺点分析