基于maven+ssm的增删改查之前后端之间使用json进行交互（显示员工信息）

package com.gong.curd.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.gong.curd.bean.Employee;
import com.gong.curd.service.EmployeeService;
import com.gong.curd.utils.Msg;

@Controller
public class EmployeeController {
    
    @Autowired
    EmployeeService employeeService;
    
    @ResponseBody
    @RequestMapping("/emps")
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn) {
        PageHelper.startPage(pn,5);
        List emps = employeeService.getAll();
        PageInfo page = new PageInfo(emps,5);
        return Msg.success().add("pageInfo",page);
    }
    
    /*
    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn,
            Model model) {
        PageHelper.startPage(pn,5);
        List emps = employeeService.getAll();
        PageInfo page = new PageInfo(emps,5);
        model.addAttribute("pageInfo", page);
        return "list";
    }
    */
}

package com.gong.curd.utils;

import java.util.HashMap;
import java.util.Map;

public class Msg {
    //状态码
    private int code;
    //提示信息
    private String msg;
    //返回的用户信息
    private Map extend = new HashMap();
    
    public static Msg success() {
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功");
        return result;
    }
    public static Msg fail() {
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理失败");
        return result;
    }
    
    public Msg add(String key,Object value) {
        this.getExtend().put(key, value);
        return this;
    }
    
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public Map getExtend() {
        return extend;
    }
    public void setExtend(Map extend) {
        this.extend = extend;
    }
    
    
}

%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
title>员工列表title>
%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js">script>
link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" >script>
head>
body>
    div class="container">
        
        div class="row">
            div class="col-md-12">
                h1>SSM-CURDh1>
            div>
        div>
        
        div class="row">
            div class="col-md-4 col-md-offset-10">
                button class="btn btn-primary">新增button>
                button class="btn btn-danger">删除button>
            div>
        div>
        
        div class="row">
            div class="col-md-12">
                table class="table table-hover" id="emps_tables">
                    thead>
                        tr>
                            th>#th>
                            th>epmNameth>
                            th>genderth>
                            th>emailth>
                            th>deptNameth>
                            th>操作th>
                        tr>
                    thead>
                    
                table>
            div>
        div>
        div class="row">
            div class="col-md-6" id="page_info_area">
            div>
            div class="col-md-6" id="page_nav_area">
            div>    
        div>
    div>
    
body>
html>

var totalRecord,currentNum;
//页面加载完成以后，直接发送ajax请求，要到分页数据
$(function(){
    to_page(1);
});

function to_page(pn){
    $.ajax({
        url:"/curd_ssm/emps",
        data:"pn="+pn,
        type:"GET",
        success:function(result){
            console.log(result);
            build_emps_table(result);
            build_page_info(result);
            build_page_nav(result);
        }
    });
}
//员工信息
function build_emps_table(result){
    $("#emps_tables tbody").empty();
    var emps = result.extend.pageInfo.list;
    $.each(emps,function(index,item){
        //var checkboxTd = $("");
        var empIdTd = $("").append(item.empId);
        var empNameTd = $("").append(item.empName); 
        var genderTd = $("").append(item.gender == "M"?"男":"女");
        var emailTd = $("").append(item.email);
        var deptNameTd = $("").append(item.dept.deptName);
        var editBtn = $("").addClass("btn btn-primary btn-sm edit_btn")
                                            .append($("").addClass("glyphicon glyphicon-pencil"))
                                            .append("编辑");
        //添加一个自定义的属性，表示当前员工id
        //editBtn.attr("edit-id", item.empId)
        var delBtn = $("").addClass("btn btn-danger btn-sm delete_btn")
                                        .append($("").addClass("glyphicon glyphicon-trash"))
                                        .append("删除");
        //delBtn.attr("del-id", item.empId)
        var btnTd = $("").append(editBtn).append(" ").append(delBtn);
        //alert(item.empName);
        $("")//.append(checkboxTd)
            .append(empIdTd)
            .append(empNameTd)
            .append(genderTd)
            .append(emailTd)
            .append(deptNameTd)
            .append(btnTd)
            .appendTo("#emps_tables tbody");
    });
}

//分页信息
function build_page_info(result){
    $("#page_info_area").empty();
    $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页"+",",
                                "总"+result.extend.pageInfo.pages+"页"+",",
                                "总"+result.extend.pageInfo.total+"条记录");
    totalRecord = result.extend.pageInfo.total;
    currentNum = result.extend.pageInfo.pageNum;
}

//分页栏
function build_page_nav(result){
    $("#page_nav_area").empty();
    var ul = $("

property name="reasonable" value="true"/>