Ajax的学习心得

Ajax是什么？

AJAX 是一种客户端 Web 开发技术，用于生成交互式 Web 应用程序。AJAX 是一种开发应用程序的方法，它结合了下面的功能，使用 JavaScript 将它们组合在一起
1.基于 XHTML 和 CSS 标准的演示
2.通过文档对象模型与页面交互
3.与 XML 和 XSLT 的数据交换
4.使用 XML HTTP 请求进行异步数据检索。

AJAX的主要用途是什么?

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

下面展示一下ajax的基本新增，修改，保存方法：

首先先建立简单的视图

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    新增
</button>
<table class="table table-bordered">
    <thead>
        <tr>
            <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 class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="edit(@item.ID,'@item.Name','@item.Remark')">修改</button>
                    <button class="btn btn-danger">删除</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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="exampleModalLabel">新增角色</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="">
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">名称</label>
                        <input type="text" class="form-control" id="name" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">备注</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" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

接下来就是新增与修改保存ajax代码了
数据库内容的话是一个role表，字段name。remark

@section scripts{
    <script>
        function edit(id,name,remark) {
             $("#id").val(id);
             $("#name").val(name);
             $("#remark").val(remark);
        }
        $("#save").click(function () {
            let id = $("#id").val();
            let name = $("#name").val();
            let remark = $("#remark").val();
            $.ajax({
                url: '/role/save',
                data: { "ID": id, "Name": name, "Remark": remark },
                type:"post",
                success: res => {
                    if (res > 0) {
                        alert("保存成功")
                        window.history.go(0)
                    } else {
                        alert("保存失败")
                    }
                }
            })
        })
    </script>
}

这里为了方便我把新增与修改写在一起的
控制器代码

 public class RoleController : Controller
    {
        RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index()
        {
            var role = db.Roles.ToList();
            return View(role);
        }

        [HttpPost]
        public ActionResult Save(Role role)
        {
            if (role.ID>0)
            {
                db.Entry(role).State = System.Data.Entity.EntityState.Modified;
            }
            else
            {
                db.Roles.Add(role);
            }
            int res = db.SaveChanges();

            return Json(res, JsonRequestBehavior.AllowGet);
            
        }
    }

希望能对你们有所帮助