Home 前端 ajax获取后端数据

ajax获取后端数据

0 52
layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table;

    table.render({
        elem: '#currentTableId',
        url: '/admin/fansMsg',接口地址
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        cols: [[ 对应字段渲染
            {type: "checkbox", width: 50},
            {field: 'id', width: 80, title: 'ID', sort: true},
            {field: 'userName', width: 80, title: '用户名'},
            {field: 'gender', width: 80, title: '性别', sort: true},
            {field: 'email', width: 200, title: '邮箱'},
            {field: 'score', width: 80, title: '评分', sort: true},
            {field: 'classify', width: 80, title: '职业'},
            {field: 'wealth', width: 135, title: '财富', sort: true},
            {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true,
        skin: 'line'
    });

后端:
/**
 * 获取粉丝信息
 */
@GetMapping("/fansMsg")
@ResponseBody
public JSONObject showFansMsg(){

    JSONObject result = new JSONObject();
    // 店铺粉丝列表
    QueryWrapper wrapper = new QueryWrapper();
    wrapper.eq("sub_storeid",1);
    List fanslist = userService.list(wrapper);
    result.put("code", "0");
    result.put("msg", "操作成功!");
    result.put("data", fanslist);
    return result;
}

总结:后端接口获取数据库数据,将数据转化为json格式,再返回json格式!前端通过ajax的url调用后端接口得到数据,通过 cols: [[ 对应字段渲染 进行字段渲染!!!

发表评论

发表评论