bootstrap页面集成jquery异步请求

jquery技术是对原生js技术的封装和优化，实现页面上的功能能独立的运行和提交给后台程序，相比之前的用表单整体提交数据可以提高系统的性能，加快响应速度。

要在项目中使用jquery必须先引入相关的js脚本，在项目中导入这些js脚本文件：

导入后接下来再进行相关技术的操作。实现效果，在一个页面上完成该页面上的操作，不会影响页面上的其他功能：

由于本次前端页面使用的是bootstrap和jquery的结合，所以需要在html文件的头部映入相关的资源，如下：

<!-- 引入bootstrap的css -->
    <link rel="stylesheet" href="../../css/bootstrap.min.css"/>
    <!-- 引入jquery的js:必须优先于bootstrap的js引入，bootstrap用了jquery的语法 -->
    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
    <!-- 引入bootstrap的js -->
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>

这里需要注意的一点是由于bootstrap中使用了jquery的语法所以要在引入bootstrap.js脚本之前引入jquery.js脚本，否则会把jquery覆盖导致页面出现错误。进入真正的页面，由于bootstrap封装了许多前端组件，通过使用类选择器的方式进行使用，比如下图上的图标：

就是直接引用bootstrap库里面的样式组装而成的，

更多的图标和布局样式可以到bootstrap官网进行详细的查询这里就不再过多介绍。使用jquery后与之前使用form表单进行提交的页面最大不同是之前的用来装载数据的html标签消失不见，转而在javascript中编写jquery代码来实现。来分析如下代码：

$(function () {
        //渲染方法
        list()

        function list() {
            $.get("../../sysUserController/list", function (data) {
                //重新遍历之前清空数据
                $("tbody").empty();
                $(data).each(function () {
                    //填充数据
                    var td1 = "<td>" + this.userId + "</td>";
                    var td2 = "<td>" + this.departId + "</td>"

                    var td3 = "<td>" + this.name + "</td>";
                    var td4 = "<td>" + this.sex + "</td>";
                    var td5 = "<td>" + this.age + "</td>";
                    var td6 = "<td>" + this.birthday + "</td>";
                    var td7 = "<td>" + this.telephone + "</td>";
                    var td8 = "<td>" + this.email + "</td>";
                    var td9 = "<td>" + this.userName + "</td>";
                    var td10 = "<td>" + this.password + "</td>";


                    var td11 = "<td>" + this.created + "</td>";
                    var td12 = "<td>" + this.updated + "</td>";

                    // var btn1 = "<button type=\"button\" class=\"btn btn-primary addBtn\"><span class=\"glyphicon glyphicon-plus\"></span>添加</button>";
                    var btn2 = " <button type=\"button\" class=\"btn btn-info updateBtn\"><span class=\"glyphicon glyphicon-pencil\"></span>修改</button>";
                    var btn3 = "  <button type=\"button\" class=\"btn btn-danger delBtn\"><span class=\"glyphicon glyphicon-trash glyphicon \"></span>删除</button>";

                    var td13 = $("<td></td>").append(btn2).append(" ").append(btn3);

                    //把组装好的td添加到tr节点下
                    var tr = $("<tr></tr>").append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7).append(td8).append(td9).append(td10).append(td11).append(td12).append(td13);

                    //把tr追加到tbody节点下
                    $("tbody").append(tr);
                })
            }, "json")
        }

$符号是jquery的特征标签，用来标识和获取相关的标签节点，function代表函数方法后面就是方法的具体执行，重要的是理解如下核心代码：

$.get("../../sysUserController/list", function (data)

代表向后台发送get形式的请求，请求路径为当前资源类路径下的/sysUserController/list，data表示请求路径方法返回的后台Json数据,然后对拿到的数据进行拼接和组装，最后把组装好的数据追加到要展示的节点下即可。而对于之前的添加和修改页面统一写到一个盒子里面作为模态框进行显示，在按钮中绑定类选择器点击事件，点击后对绑定的模态框弹出显示，注意的是在添加时id主键要手动清除。jquery修改页面的回显首先使用委托事件，由于修改按钮是后期添加进去的，所以需要委托事件给父元素来实现，通过 var tr = this.parentNode.parentNode;找到要修改元素的tr行，获取其中每个单元格td的内容，把内容设置到模态框中，然后进行显示，这样就使用jquery实现了修改模态框的数据回显，最后绑定确认修改按钮点击事件，发送请求到后台，实现修改的持久化存储。

到此今天的分享就到这里结束，希望能对大家有所帮助