2.3、Ajax请求与json响应>分页信息 - 2.3.4、index.jsp 遍历员工信息 - 《SSM》

以下为一整个index.jsp页面。方便看分开记录的。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工信息查询</title>
    <%
        pageContext.setAttribute("path",request.getContextPath());
    %>
</head>
<body>
${path}<%-- /SSM --%>
<%--搭建页面--%>
<div class="container">
    <%--标题--%>
    <div class="row">
        <div class=".col-lg-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8"><%--列偏移--%>
            <button type="button" class="btn btn-success">新增</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>
    <%--显示表格数据--%>
    <div class="row ">
        <div class="col-md-12">
            <table class="table table-hover" id="employees_table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
</div>

引入jQuery、BootStarp

  <%--引入jQuery--%>
  <script type="text/javascript" src="${path}/static/script/jquery-1.7.2.js"></script>
  <%--引入样式--%>
  <link href="${path}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="${path}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

javascript代码写在：引入jQuery、BootStarp的后面（为了让jQuery、BootStarp引入完成，在执行，以免报错）。
javascript中的 ajax 请求 与 json结果回调：
员工信息遍历与插入：

  <script type="text/javascript"> 
    //1、页面加载完成后，直接发送Ajax请求，获取分页数据。
      $(function(){
          $.ajax({
              url:"${path}/list",//请求地址
              data:"pageNumber=1",//携带参数
              type:"get",//请求方式
              success:function (result){//回调函数
                  //console.log(result);//输出结果到浏览器 响应 Response
                  //调用函数
                  build_employee_table(result);
              }
          });
      });
  /*员工信息表格*/
      function build_employee_table(result){
        //通过 ajax请求 中结果回调函数，获取 员工信息
          var employees = result.extend.pageInfo.list;
          /**
           * employees:要遍历的数据
           * index：索引
           * item：遍历的，变量名
           * */
          $.each(employees,function (index,item){
              //alert(item.empName);
              var empIdTd = $("<td></td>").append(item.empId);/*创建 <td></td> 标签 并添加遍历的内容*/
              var empNameTd = $("<td></td>").append(item.empName);
              var denderTd = $("<td></td>").append(item.gender);
              var emailTd = $("<td></td>").append(item.email);
              var deptNameTd = $("<td></td>").append(item.department.deptName);
              //编辑按钮
              var editBtn = $("<button></button>").addClass("btn btn-primary").
                                           append($("<span></span>").addClass("glyphicon glyphicon-pencil btn-xs")).
                                           append("编辑");
              //删除按钮
              var deleteBtn = $("<button></button>").addClass("btn btn-danger").
                                          append($("<span></span>").addClass("glyphicon glyphicon-trash btn-xs")).
                                          append("删除");
              //把编辑、删除两个按钮添加到 同一个单元格里
              var button = $("<td></td>").append(editBtn).append(" ").append(deleteBtn);
              /*创建<tr></tr>标签 把遍历到的员工信息，追加到内容追加到里面*/
              $("<tr></tr>").append(empIdTd).
                              append(empNameTd).
                              append(denderTd).
                              append(emailTd).
                              append(deptNameTd).
                              append(button).
                              appendTo("#employees_table tbody");//使用选择器，把<tr>插入到 id="#employees_table" 下的 tbody标签中
          });
      }
  </script>
</body>
</html>