bootstrap模态框（添加、修改）

您所在的位置：网站首页 › layui模态框 › bootstrap模态框（添加、修改）

bootstrap模态框（添加、修改）

2023-04-01 06:09| 来源: 网络整理| 查看: 265

动态路由（后台）：

注： url后面+“:” 动态绑定id ; findOne查询单个数据

拟态框添加（post）：

// 拟态框/添加 $("#modal-id").on("click",".btn-primary",function(){ var title =$(this).closest(".modal-content").find("#title").val(); var content=$("#content").val(); var top=$("#top").val()==="on"; $.ajax({ url:"http://localhost:3000/content", type:"POST", data:{title,content,top}, success:function(res){ if(res.status===200){ console.log("添加成功"); $("#modal-id").modal("hide"); load(); }else{ alert(res.msg); // 错误信息 } } }) }) 复制代码

拟态框需要引用文件

复制代码

html部分：

× Modal title 标题内容置顶取消确定复制代码

（拟态框效果）

添加验证（升级版添加）：引用文件：

复制代码 // 验证配置 $("#modal-id form").validate({ submitHandler:function(){ // ===============================添加 var id =$("#_id").val(); var title =$("#title").val(); var content=$("#content").val(); var top=$("#top").prop("checked"); //=============================获取4个属性的值 if(id){ //判断id是不存在存在就是修改，不存在就是添加 //=============================修改 $.ajax({ url:`http://localhost:3000/content/${id}`, type:"PUT", data:{title,content,top}, success:function(res){ if(res.status===200){ console.log("修改成功"); $("#modal-id").modal("hide"); load(); }else{ alert(res.msg); // 错误信息 } } }) }else{ //==========================添加 $.ajax({ url:"http://localhost:3000/content", type:"POST", data:{title,content,top}, success:function(res){ if(res.status===200){ console.log("添加成功"); $("#modal-id").modal("hide"); load(); }else{ alert(res.msg); // 错误信息 } } }) } }, rules:{ title:{ required:true, //必填 minlength:6, //最小 maxlength:12 //最大 }, content:{ required:true, //必填 minlength:10, maxlength:50 } }, messages:{ //==============================中文注解 title:{ required:"请输入标题", minlength:"标题最少6个字符", maxlength:"标题最多12个字符" }, content:{ required:"请输入正文", minlength:"标题最少10个字符", maxlength:"标题最多50个字符" } } }) $("#modal-id").on("click",".btn-primary",function(){ $(this).closest(".modal-content").find("form").submit(); }) 复制代码

效果：

注：添加和修改需要验证，否则后台可能接收错误 url:http://localhost:3000/content/${id} 反引号+url后缀,其中${id}

修改显示（get）：分三步：静态、动态、显示

$(".table").on("click",".glyphicon-edit",function(){ //动态 var id=$(this).parent().attr("data-id"); $.ajax({ url:`http://localhost:3000/content/${id}`, type:"GET", success:function(res){ if(res.status===200){ const data=res.data; //静态 $(".modal-title").html("修改"); $("#_id").val(id); $("#title").val(data.title); $("#content").val(data.content); $("#top").prop("checked",data.top); //显示 $("#modal-id").modal("show") } console.log(res); } }) }) 复制代码

注：数据需要先调用数据，再修改

修改内容（put）：

$.ajax({ url:`http://localhost:3000/content/${id}`, type:"PUT", data:{title,content,top}, success:function(res){ if(res.status===200){ console.log("添加成功"); $("#modal-id").modal("hide"); load(); }else{ alert(res.msg); // 错误信息 } } }) 复制代码

优化（刷新清空数据）：

// 监听事件 $("#modal-id").on("hidden.bs.modal",function(){ // 表单清空 $("#_id").val(""); $("#title").val(""); $("#content").val(""); $("#top").prop("checked",false); }) 复制代码

【本文地址】

bootstrap模态框（添加、修改）

bootstrap模态框（添加、修改）

今日新闻

推荐新闻