SSM项目用ajax来显示数据

 1 <script type="text/javascript"> 2 ????????????//1:页面加载完成后，直接去发送ajax请求，要到分页的数据 3 ????????????$(function(){ 4 ????????????????$.ajax({ 5 ????????????????????url:"${APP_PATH}/emps", 6 ????????????????????data:"pn=1", 7 ????????????????????type:"GET", 8 ????????????????????success:function(result){ 9 ????????????????????????//1:解析并显示员工数据。10 ????????????????????????build_emps_table(result);11 ????????????????????}12 ????????????????});13 ????????????});14 ????????15 ????????????function build_emps_table(result){
　　　　　　　　　　　　//result是一个返回结果集。数据是在Controller层的时候就返回的是一个JSON对象。然后页面上直接取出来就行了。16 ????????????????var emps=result.map.pageInfo.list;
　　　　　　　　　　　　//ajax的foreach遍历。17 ????????????????$.each(emps,function(index,item){18 ????????????????????//$("<td></td>")这是创建一个<td>标签。<th>表示行。<td>表示列。19 ????????????????????var empIdTd=$("<td></td>").append(item.empId);20 ????????????????????var empNameTd=$("<td></td>").append(item.empName);21 ????????????????????var genderTd=$("<td></td>").append(item.gender==‘M‘?"男":"女");22 ????????????????????var emailTd=$("<td></td>").append(item.email);23 ????????????????????var deptNameTd=$("<td></td>").append(item.department.deptName);24 ????????????????????/**25 ????????????????????<button class="">26 ????????????????????????????????????????<span class="" aria-hidden="true"></span>27 ????????????????????????????????????????编辑28 ????????????????????????????????????</button>29 ????????????????????*/30 ????????????????????var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")31 ????????????????????????????????????????????.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))32 ????????????????????????????????????????????.append("编辑"); ???33 ????????????????????var delBtn = ?$("<button></button>").addClass("btn btn-danger btn-sm delete_btn")34 ????????????????????????????.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");35 ????????????????????var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);36 ????????????????????//先在<tbody>下创建<tr>标签。然后创建的<td>标签追加到<tr>的后面。37 ????????????????????$("<tr></tr>").append(empIdTd)38 ????????????????????????????????.append(empNameTd)39 ????????????????????????????????.append(genderTd)40 ????????????????????????????????.append(emailTd)41 ????????????????????????????????.append(deptNameTd)42 ????????????????????????????????.append(btnTd)43 ????????????????????????????????.appendTo("#emps_table tbody");44 ????????????????????45 ????????????????});46 ????????????}47 ?????????????48 ????????</script>

1 PageHelper.startPage(pn, 5);2 ????????// startPage后面紧跟的这个查询就是一个分页查询3 ????????List<Employee> emps = employeeService.getAllEmployees();4 ????????// 使用pageInfo包装查询后的结果，只需要将pageInfo交给页面就行了。5 ????????// 封装了详细的分页信息,包括有我们查询出来的数据，传入连续显示的页数6 ????????PageInfo page = new PageInfo(emps, 5);7 ????????return Msg.success().add("pageInfo", page);

 1 package com.ssm.curd.bean; 2 ?3 import java.util.HashMap; 4 import java.util.Map; 5 ?6 /* 7 ?* 通用的返回类 8 ?*/ 9 public class Msg {10 11 ????//返回码，100表示成功。200表示失败12 ????private int code;13 ????//提示信息14 ????private String msg;15 ????//用户要返回的数据16 ????private Map<String, Object> map=new HashMap<String, Object>();17 ????18 ????public int getCode() {19 ????????return code;20 ????}21 ????public void setCode(int code) {22 ????????this.code = code;23 ????}24 ????public String getMsg() {25 ????????return msg;26 ????}27 ????public void setMsg(String msg) {28 ????????this.msg = msg;29 ????}30 ????public Map<String, Object> getMap() {31 ????????return map;32 ????}33 ????public void setMap(Map<String, Object> map) {34 ????????this.map = map;35 ????}36 ????37 ????//100的返回38 ????public static Msg success(){39 ????????Msg result = new Msg();40 ????????result.setCode(100);41 ????????result.setMsg("处理成功");42 ????????return result;43 ????}44 ????public static Msg fail(){45 ????????Msg result = new Msg();46 ????????result.setCode(200);47 ????????result.setMsg("处理失败");48 ????????return result;49 ????}50 ????51 ????public Msg add(String key,Object value){52 ????????this.getMap().put(key, value);53 ????????return this;54 ????}55 }