AJAX结合弹框实现增删改

AJAX结合弹框实现新增修改删除
控制器代码:

 public ActionResult Index()
        {
            var roles = db.Roles.ToList();
            return View(roles);
        }

        public ActionResult add(Role role)
        {
            var code = 0;
            var message = "新增失败";
            db.Roles.Add(role);
            if (db.SaveChanges() > 0)
            {
                code = 1;
                message = "新增成功";
            }
            var res = new
            {
                code = code,
                message = message
            };

            return Json(res,JsonRequestBehavior.AllowGet);
        }
        public ActionResult edit(int id)
        {
            var role = db.Roles
                .Where(p => p.ID == id)
                .Select(p => new { p.ID, p.Name, p.Remark })
                .FirstOrDefault();
            return Json(role, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public ActionResult edit(Role role)
        {
            var code = 0;
            var message = "修改失败";
            db.Entry(role).State=System.Data.Entity.EntityState.Modified;
            if (db.SaveChanges() > 0)
            {
                code = 1;
                message = "修改成功";
            }
            var res = new
            {
                code = code,
                message = message
            };

            return Json(res, JsonRequestBehavior.AllowGet);
        }
        //删除
        public ActionResult delete(int id)
        {
            var code = 0;
            var message = "删除失败";
            var role = db.Roles.Find(id);
            db.Roles.Remove(role);
          
            if (db.SaveChanges() > 0)
            {
                code = 1;
                message = "删除成功";
            }
            var res = new
            {
                code = code,
                message = message
            };

            return Json(res, JsonRequestBehavior.AllowGet);
        }
页面代码

@{
    ViewBag.Title = "Index";
}
@model List<Com.Fengsl.Lz.Models.Role>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#roleModal" onclick="add();">
    新增
</button>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>名称</th>
            <th>备注</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Remark</td>
                <td>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#roleModal" onclick="edit(@item.ID)">
                        修改
                    </button>
                </td>
                <td>
                    <button type="button" class="btn btn-primary" onclick="del(@item.ID)">
                        删除
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roleTitle">角色新增/修改</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">                
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name">名称</label>
                        <input type="text" class="form-control" id="name" />
                    </div>
                    <div class="form-group">
                        <label for="remark">备注</label>
                        <input type="text" class="form-control" id="remark" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="save();">保存</button>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        var url;
        function save() {
            //获取文本框的值
            var name = $("#name").val();
            var remark = $("#remark").val();
            //调用ajax实现新增保存,保存以后,关闭弹框,刷新数据
            $.ajax({
                url: url,
                type: "post",
                dataType: "json",
                data: { "name": name, "remark": remark },
                success: function (res) {
                    if (res.code == 1) {
                        //关闭对话框
                        $('#roleModal').modal('hide');
                       
                        //刷新页面
                        window.location.href = "/role/index";
                    }
                    alert(res.message);
                }
            });

            //保存失败,弹出提醒

        }
        //点击新增按钮
        function add() {
            //清空文本框
            $("#name").val("");
            $("#remark").val("");
            url="/role/add";
        }
        //点击修改按钮
        function edit(id) {
            //根据ID,查询名称和备注,放到文本框里
            url= "/role/edit/" + id;
            $.ajax({
                url: "/role/edit/" + id,
                type: "get",
                dataType: "json",
                success: function (res) {
                    $("#name").val(res.Name);
                    $("#remark").val(res.Remark);
                }
            });
        }

        //删除
        function del(id) {
            if (window.confirm("确认是否删除")) {

                $.ajax({
                    url: "/role/delete/" + id,
                    type: "get",
                    dataType: "json",
                    success: function (res) {
                        window.location.href = "/role/index";
                    }
                });
            }
        }
    </script>   
    }

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSM(Spring+SpringMVC+MyBatis)是一种常用的Java Web开发架组合,可以方便地实现增删查(CRUD)操作。在SSM中,可以通过Ajax技术来实现增删操作的异步请求。 下面是一些实现的步骤: 1. 在前端页面中引入jQuery或其他类似的JavaScript库,以便使用Ajax进行异步请求。 2. 创建一个Controller类,并在其中定义处理增删请求的方法。这些方法使用SpringMVC的注解来标记,如`@RequestMapping`。 3. 在前端页面中编写JavaScript代码,使用Ajax发送HTTP请求到后端Controller的方法。根据需要,可以使用GET或POST方法,并传递相应的参数。 4. 在Controller方法中,根据请求参数进行相应的增删操作。可以调用Service层的方法来处理业务逻辑,并通过MyBatis访问数据库。 5. 在Controller方法中,根据操作结果返回相应的响应数据。可以使用JSON格式返回,以便前端页面进行处理。 下面是一个简单示例: 前端页面(示例为HTML): ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function addData() { var data = { name: "John", age: 25 }; $.ajax({ url: "/add", type: "POST", data: JSON.stringify(data), contentType: "application/json", success: function(response) { // 处理成功响应 }, error: function(xhr, status, error) { // 处理错误响应 } }); } </script> <button onclick="addData()">Add Data</button> ``` Controller类: ```java @Controller public class DataController { @Autowired private DataService dataService; @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public String addData(@RequestBody Data data) { // 调用Service层的方法进行数据添加操作 boolean success = dataService.addData(data); if (success) { return "Success"; } else { return "Error"; } } } ``` Service类: ```java @Service public class DataService { @Autowired private DataDao dataDao; public boolean addData(Data data) { // 调用MyBatis的Mapper接口进行数据库插入操作 int count = dataDao.insertData(data); return count > 0; } } ``` 以上示例为简化版,实际项目中可能还涉及到参数校验、异常处理等其他内容。希望能帮到你!如果还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值