客户新增，增加按钮点击后无法弹窗页面
来源：7-2 客户新增二
慕宝麟
2021-06-15 11:23
/**
* 进入新增页
* @return
*/
@GetMapping("toAdd")
public String toAdd(){
return "customer/customerAdd";
}
/**
* 新增客户
* @param customer
* @return
*/
@PostMapping
@ResponseBody
public R<Object> add(@RequestBody Customer customer){
boolean success = customerService.save(customer);
if (success){
return R.ok(null);
}
return R.failed("操作失败");
}customerAdd.html：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
</head>
<body>
<form class="layui-form" id="addForm"
method="post" th:action="@{/customer}">
<div class="layui-form-item">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" placeholder="请输入姓名"
autocomplete="off" class="layui-input" lay-verify="required" maxlength="50">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男"> <input
type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="age" placeholder="请输入年龄" autocomplete="off"
class="layui-input" lay-verify="number" maxlength="3">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" placeholder="请输入邮箱"
autocomplete="off" class="layui-input" lay-verify="email" maxlength="100">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="text" name="phone" placeholder="手机号码"
autocomplete="off" class="layui-input" lay-verify="phone" maxlength="11">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-block">
<input type="text" name="address" placeholder="地址"
autocomplete="off" class="layui-input" maxlength="200">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</body>
</html>customerList.html文件：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}">
</head>
<body>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-inline" style="width: 150px;">
<input type="text" id="realName" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-inline" style="width: 150px;">
<input type="text" id="phone" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button class="layui-btn" onclick="query()">查询</button>
</div>
</div>
</div>
<button class="layui-btn" onclick="toAdd()">增加</button>
<table id="customerList"></table>
<script th:src="@{/webjars/layui/layui.all.js}"></script>
<script th:src="@{/webjars/jquery/jquery.js}"></script>
<script th:src="@{/js/customer/customer.js}"></script>
<script type="text/html" id="barDemo">
<a class="layui-btn 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>
</body>
</html>customer.js文件：
var table = layui.table;
//第一个实例
var tableIns = table.render({
elem:'#customerList'
,url:'/customer/list' //数据接口
,page: true //开启分页
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.data.count, //解析数据长度
"data": res.data.records //解析数据列表
};
}
,cols: [[ //表头
{field:'realName',title: '真实姓名'}
,{field: 'sex',title: '性别'}
,{field: 'age',title: '年龄'}
,{field: 'phone',title: '手机号'}
,{field: 'createTime',title: '创建时间'}
,{title: '操作',toolbar:'#barDemo'}
]]
});
/**
* 按条件查询
*/
function query() {
tableIns.reload({
where:{ //设定异步数据接口的额外参数，任意设
realName: $("#realName").val()
,phone:$("#phone").val()
}
,page: {
curr: 1 //重新从第一页开始
}
});
}
function toAdd() {
$.get('/customer/toAdd', function (res) {
layui.open({
type: 1
, title: '新增客户'
, area: ['800px', '450px']
, content: res
});
layui.form.render();
layui.form.on('submit(addSubmit)', function (data) {
$.ajax({
url: data.form.action
, async: false
, type: 'POST'
, contentType: 'application/json;charset=utf-8'
, data: JSON.stringify(data.field)
, success: function (res) {
if (res.code == 0) {
layer.closeAll();
query();
} else {
layer.alert(res.msg);
}
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
}
写回答
关注
2回答
-
- 老猿
- 2021-06-28 08:34:09
同学，问题现在已经解决了吗？如果还没解决，你可以按F12使用浏览器的调试模式，看看点击新增按钮时，JS是否报错，如果报错分析一下原因。如果不报错，你可以debug一下新增方法，看看调用没，是什么原因导致弹不出来。
-
- 慕斯7521682
- 2022-03-24 19:42:49
同学，问题解决了吗，我也是这个问题
MyBatis-Plus + SpringBoot实现简单权限管理
通过实战项目掌握MyBatis-Plus应用！
12724 学习 · 133 问题
相似问题