一、使用的软件配置

# idea 2022.1
# layui-v2.6.3 的数据表单编辑功能
# SSM下

二、问题与解决方法

问题:layui中一次ajax请求回调两次
图示如下:
前端提交ajax与后端交互
解决办法:
设置一个变量,调用前设置为true,调用时设置为false,通过if调控
解决之后,如下图所示:
解决之后

三、网页代码

1、ajax代码

 //监听弹出框表单提交,massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setFormValue(obj,data){
            var passwd=data.upass
            // 这里是设置表单数据的值
            layui.form.val("dateFrm", {
                "id":data.id,
                "uid":data.uid,
                "role":data.role,
            });
            var isSubmit=false;
            layui.form.on('submit(doSubmit)', function(massage) {
                if(isSubmit)return false;
                isSubmit=true;
                if(isSubmit) {
                    $.ajax({
                        url: '/admin/updateUser',
                        type: 'POST',
                        data: massage.field,
                        success: function (msg) {
                            if (msg === '200') {
                                layer.msg("修改成功", {icon: 6});
                                setTimeout(function () {
                                    obj.update({
                                        upass: massage.field.upass,
                                        role: massage.field.role,
                                    });//修改成功修改表格数据不进行跳转
                                    layer.closeAll();//关闭所有的弹出层
                                }, 1000);
                                isSubmit=false;
                            } else {
                                layer.msg("修改失败", {icon: 5});
                                isSubmit=false;
                            }
                        }
                    })
                    // return false;
                }
            })
        }

2、表单代码

使用的隐藏域

!-- 添加和修改的弹出层代码-->
<div style="display: none; padding: 10px;" id="updateUser">
    <div class="layui-form" lay-filter="dateFrm" id="dateFrm">
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" lay-verify="required"
                            readonly autocomplete="off" class="layui-input" >
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="uid" lay-verify="required"
                           readonly autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="text" name="upass" autocomplete="off" placeholder="请输入您想修改的密码" class="layui-input">
                    <!-- required lay-verify="required"验证 -->
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-line">
                <label class="layui-form-label">身份</label>
                <div class="layui-input-inline">
                    <input type="text" name="role" lay-verify="required"
                           readonly autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=""
                        lay-filter="doSubmit" id="update" >提交</button>
                <!-- lay-submit=''判断提交的form表单是否为空 -->
                <button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
                        lay-filter="submit" id="quXiao">取消</button>
            </div>
        </div>
    </div>
</div>

3、后端与ajax交互代码

	@RequestMapping("/updateUser")
    @ResponseBody
    public String updateUser(UsersDto ud){
        System.out.println("调用一次");
        String res;
        // 密码为空或者空字符串
        if (ud.getUpass().equals("") || ud.getUpass()==null){
            res = "400";
        }else {
            ud.setUpass(Md5.md5(ud.getUpass(),ud.getUid().toString()));
            Users u = new Users(ud.getId(), ud.getUid(), ud.getUpass(), iuds.getFlagByRole(ud.getRole()));
            System.out.println(u);
            res = "200";
        }
        return res;
    }

参考链接:
https://blog.csdn.net/u011127019/article/details/123149815

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐