Ajax几天的问题

分页前台

//点击编辑后弹出层
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px" >
            <%--<div class="layui-form-item">--%>
                <%--<label class="layui-form-label">用户名</label>--%>
                <%--<div class="layui-input-block">--%>
                    <%--<select name="eqptType" lay-filter="eqptType">--%>
                        <%--<option value="0a0003biac">0a0003biac</option>--%>
                        <%--<option value="0a0003ahup" selected="">0a0003ahup</option>--%>
                    <%--</select>--%>
                <%--</div>--%>
            <%--</div>--%>
                        <input type="hidden" name="id" id="id">


            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" id="address"  required  lay-verify="required" autocomplete="off" placeholder="请输入地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" id="username" required  lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="formDemo">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



//表格图片显示不全
<style type="text/css">
    td div.layui-table-cell{height:100px;
        line-height: 100px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 0px 15px;
        overflow: hidden;
    }
</style>

<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table,
            layer = layui.layer,
             // $ = layui.jquery
            form = layui.form;
        table.render({
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/test3.action'
            ,type:'post'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                ,{field:'username', title:'用户名', width:120, edit: 'text'}
                ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                    }}
                ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
                ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
                ,{field:'logins', title:'登入次数', width:100,sort: true, totalRow: true}
                ,{field:'sign', title:'签名'}
                ,{field:'address', title:'城市', width:'10%',sort:true, templet:'<div><img src="/file/{{d.address}}"></div>'}
                ,{field:'ip', title:'IP', width:120}
                ,{field:'joinTime', title:'加入时间', width:120}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true

        });

        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'${pageContext.request.contextPath}/deleteUser.action',
                        type:'GET',
                        data:{
                            id:obj.data.id
                        },
                        success:function (msg) {
                            if(msg=="1"){
                                layer.msg("删除成功", {icon: 6});
                                setTimeout(function(){
                                    layer.closeAll();//关闭所有的弹出层
                                }, 1000);
                                加载层-风格
                            }else{
                                layer.msg("删除失败", {icon: 5});
                            }
                        }

                    })
                    obj.del();
                    layer.close(index);

                });
            } else if(obj.event === 'edit'){
                // layer.alert('编辑行：<br>'+ JSON.stringify(obj.data.address))
                $("#id").val(obj.data.id);
                $("#username").val(obj.data.username);
                $("#address").val(obj.data.address);
                       layer.open({
                           type:1,
                           title:"修改个人信息",
                           area: ['420px', '330px'],
                           content: $("#popUpdateTest")
                    });
            }
        });



            form.on('submit(formDemo)', function(data) {
               $.ajax({
                    url:'${pageContext.request.contextPath}/updateUser.action',
                    type:'post',
                     contentType:'application/json',
                    data:JSON.stringify(data.field),
                    success:function (msg) {
                        alert(msg);
                        if(msg=="1"){
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            setTimeout(function(){
                                layer.closeAll();//关闭所有的弹出层
                                table.reload("test");
                            }, 1000);
                            加载层-风格
                        }else{
                            layer.msg("修改失败", {icon: 5});
                        }
                    }
                })
                return false;
            })

    });
</script>

<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>

分页工具类

package cn.lzm.util;

/**
 * @author lzm
 * @create 2019- 06- 05- 9:25
 */
public class PageResult<T> {

    private String msg;
    private  T data;
    private  int code;
    private  int count;


    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public PageResult(String msg, T data, int code, int count) {
        this.msg = msg;
        this.data = data;
        this.code = code;
        this.count = count;
    }
}

Controller

   @ResponseBody
   @RequestMapping(value = "test3.action")
    public PageResult<List<User>> fenye(@RequestParam(value = "page") int page ,int limit)
    {
        //会自动传入limit和page
        System.out.println("11111111111111111111111111111111111111111111111111");
        System.out.println(page);
        System.out.println(limit);
//     分页查询，需要参数code（要为0，不然数据表格数据显示不出）,msg（返回的消息），data(表格显示的数据)，totals(查询到数据的总记录数)，
        List<User> userList = userService.listUserByPageAndLimit( page,limit);
        System.out.printf(userList.toString());
        //返回的总记录数
        int count=userService.findUserPageCount();
        PageResult<List<User>> listPageResult=new PageResult<List<User>>("",userList,0,count);
        return listPageResult;
    }

上传图片到虚拟路径
上传本机的 D:\upload\下;

Controller

//    上传文件
        @RequestMapping("/file/upload.action")
        @ResponseBody
public Map<String,Object> fileupload(MultipartFile file, HttpSession session) throws IOException {
            Map<String, Object> map = new HashMap<>();
            map.put("code", 1);
            if (file != null && file.getOriginalFilename() != null && file.getOriginalFilename().length() > 0) {
                String filepath="D:\\upload\\";
      //    String filepath="/upload/";
                String originalFilename = file.getOriginalFilename();
                //扩展名
                String extendName = originalFilename.substring(originalFilename.indexOf("."));
                String newfilename = UUID.randomUUID().toString() + extendName;
                File uploadfile = new File(filepath + newfilename);
                file.transferTo(uploadfile);
                map.put("data", newfilename);
                map.put("code", 0);
            }
            return map;
        }

前台

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<%--<script src="${pageContext.request.contextPath}/layui/lay/modules/jquery.js"></script>--%>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="layui-row" id="popUpdateTest">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px" id="addUserForm" >

            <div class="layui-upload" style="margin-left: 100px">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list"  >
                    <img class="layui-upload-img" id="demo1" style="width:100px;height:100px;" >
                    <p id="demoText"></p>
                </div>

            </div>

            <input type="hidden" name="address" id="address" value="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" id="username" required  lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>


            <%--<div class="layui-form-item">--%>
                <%--<label class="layui-form-label"></label>--%>
                <%--<div class="layui-input-block">--%>
                    <%--<input type="text" name="address" id="address"  required  lay-verify="required" autocomplete="off" placeholder="请输入地址" class="layui-input">--%>
                <%--</div>--%>
            <%--</div>--%>



            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="formDemo" type="button">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>

<script>
    layui.use(['table', 'form', 'layer','upload'], function () {
        var table = layui.table,
            layer = layui.layer,
            upload = layui.upload,
            $ = layui.jquery
            form = layui.form;
        form.on('submit(formDemo)', function(data) {
            $.ajax({
                url:'${pageContext.request.contextPath}/addUser.action',
                type:'post',
                contentType:'application/json',
                data:JSON.stringify(data.field),
                success:function (msg) {
                    if(msg=="1"){
                        $('#demo1').attr('src',null);
                        layer.closeAll('loading');
                        layer.load(2);
                        layer.msg("添加成功", {icon: 6});
                        setTimeout(function(){
                            layer.closeAll();//关闭所有的弹出层
                            $("#addUserForm")[0].reset();
                        }, 1000);
                        加载层-风格
                    }else{
                        layer.msg("添加失败", {icon: 5});
                    }
                }
            })
            return false;
        });


        // 图片上传
        upload.render({
            elem: '#test1'
            ,url: '${pageContext.request.contextPath}/file/upload.action'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                $("[name=address]").val(res.data);
                style:'display:inline-block;max-width:50%;height:auto'
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else {
                    layer.msg("上传成功");
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        });
</script>
</body>

</html>

layui点击左侧菜单后嵌入界面

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div >
            <iframe width="100%" height="100%" name="viewDiv"> </iframe>
        </div>
    </div>

  <dd><a href="${pageContext.request.contextPath}/test2.action" target="viewDiv">显示用户</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/ToAddUser.action" target="viewDiv">增加用户</a></dd>