码迷,mamicode.com
首页 > Web开发 > 详细

SSM项目用ajax来显示数据

时间:2018-03-22 19:32:56      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:技术   com   edit   func   void   type   key   pageinfo   asc   

 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);

 

map是我们写的JSON类中,用来存储返回结果集的。Controller中的数据是直接返回的是这个JSON的类。

pageInfo是保存处理后的数据。

 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 }

 

SSM项目用ajax来显示数据

标签:技术   com   edit   func   void   type   key   pageinfo   asc   

原文地址:https://www.cnblogs.com/bulrush/p/8625214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!