ssm项目之Ajax请求返还json解析

本文地址:http://www.cnblogs.com/maplefighting/p/7499338.html

上一篇只适用于浏览器，但是我们客户端等的解析就麻烦了

所以用Ajax请求会比较好，以json发送给客户端

index.jsp直接发送ajax请求进行员工分页数据的查询，服务器返回json数据，然后浏览器使用js对json进行解析，通过dom增删改改变页面，这样就客户端无关性

导入jackson包 2.8.8

在EmployeeController.java中把RequestMapping("/emps")

/**
     * 导入jackson包
     * @param pn
     * @param model
     * @return
     */
    @RequestMapping("/emps")
    @ResponseBody
    public PageInfo  getEmpsWithJson(
            @RequestParam(value="pn", defaultValue="1")Integer pn,Model model) {
        //引入PageHelper分页插件
        //在查询之前只需要调用。传入页码，以及每页大小
        PageHelper.startPage(pn,5);
        //startPage后面紧跟的查询就是分页查询
        List<Employee> emps = employeeService.getAll();
        //pageInfo包装查询后的结果，只需要将pageINfo交给页面
        //封装了详细的分页信息，包括我们查询出来的数据，传入连续显示的页数
        PageInfo page = new PageInfo(emps,5);
        
        return page;
    }

View Code

启动访问下http://localhost:8080/ssm-crud/emps

但是这样不具有通用性，可以写一个有返回状态的，要添加其他的数据add就行了

package com.sgd.crud.bean;

import static org.hamcrest.CoreMatchers.theInstance;

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

/**
 * 通用返回的类
 *
 */
public class Msg {
    //状态码 100-成功   200-失败
    private int code;
    //提示信息
    private String msg;
    
    //用户要返回给浏览器的数据
    private Map<String, Object> extend = new HashMap<String,Object>();

    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<String, Object> getExtend() {
        return extend;
    }

    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }
    
}

View Code

页面就不用跳转的了，另外新建index.jsp，直接用ajax获取数据，然后解析返回的json数据，通过dom增删改页面

就是需要数据的时候请求，拼接json后显示在页面

index.jsp

<%@ 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());
%>
<!-- 以/开始的相对路径，找资源，以服务器路径为基准 -->
<!-- 引入jquery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<!-- 引入bookstrap -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<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-CRUD</h1>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <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_table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="check_all" />
                            </th>
                            <th>#</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>department</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分页数据 -->
        <div class="row">
            <!-- 分页文字信息 -->
            <div id="page_info_area" class="col-md-6">

            </div>

            <!-- 分页条信息 -->
            <div id="page_nav_area" class="col-md-6">

            </div>
        </div>
        
    </div>
    <script type="text/javascript">

    var totalRecord, currentPage;
    //1、页面加载完成以后，直接去发送一个 ajax 请求，要到分页数据,$表示页面加载完再执行这个函数
    $(function(){
        to_page(1);
    });

    function to_page(pn) {
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //解析数据并显示员工数据
                build_emps_table(result);
                //显示分页信息
                build_page_info(result);
                //显示分页条数据
                build_page_nav(result);
            }
        });
    }

    //显示员工信息
    function build_emps_table(result) {
        //清空数据
        $("#emps_table tbody").empty();

        var emps = result.extend.pageInfo.list;

        $.each(emps, function(index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);

            var genderTd = $("<td></td>").append(item.gender=='M'?'男':'女');
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            /*
            <button type="button" class="">新增</button>
            <button type="button" class="btn btn-danger btn-sm">删除</button>
            <span class="" aria-hidden="true"></span>
            */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>"))
            .addClass("glyphicon glyphicon-pencil").append("编辑");
            editBtn.attr("edit-id", item.empId);


            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>"))
            .addClass("glyphicon glyphicon-trash").append("删除");
            delBtn.attr("del-id", item.empId);

            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

            $("<tr></tr>").append(checkBoxTd)
            .append(empIdTd)
            .append(empNameTd)
            .append(genderTd)
            .append(emailTd)
            .append(deptNameTd)
            .append(btnTd)
            .appendTo("#emps_table tbody");

        });
    }

    //显示分页信息
    function build_page_info(result) {
        //清空数据
        $("#page_info_area").empty();
        //alert("hello");
        $("#page_info_area").append("当前 " +
                result.extend.pageInfo.pageNum + " 页，总 " +
                result.extend.pageInfo.pages + " 页，总 " +     
                result.extend.pageInfo.total + " 条记录");
        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //显示分页条，点击分页要有动作
    function build_page_nav(result) {
        //清空数据
        $("#page_nav_area").empty();
        //page_nav_area
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.extend.pageInfo.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页事件
            //添加首页、前一页的点击
            firstPageLi.click(function() {
                to_page(1);
            });

            prePageLi.click(function() {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }


        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

        if(result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //添加末页、下一页的点击
            nextPageLi.click(function() {
                to_page(result.extend.pageInfo.pageNum + 1);
            });

            lastPageLi.click(function() {
                to_page(result.extend.pageInfo.pages);
            });
        }


        
        ul.append(firstPageLi).append(prePageLi);

        $.each(result.extend.pageInfo.navigatepageNums,function(index, item){
            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.extend.pageInfo.pageNum == item) {
                numLi.addClass("active");
            }

            numLi.click(function(){
                to_page(item);
            });

            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);

        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    </script>
</body>
</html>

View Code

mybatis-config.xml中配置合理化参数，也就是只会查询分页区间内的数据

这样，页面查询功能就完成了，接下来就是完成新增删除等等了

posted @ 2017-09-11 16:21 maplefighting 阅读(1313) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

maplefighting

——迎难而上，而不是退缩

ssm项目之Ajax请求返还json解析

公告