学生成绩管理系统-SSM实现(三)——使用json进行前后端交互实现分页展示数据

学生成绩管理系统-SSM实现(使用json进行前后端交互实现分页展示数据)


使用了maven管理项目,使用json传递数据速度很快,并且容易在js操作,从而实现网页的异步显示数据


pom.xml

<!-- json所需jar start -->
        <jackson.version>1.9.13</jackson.version>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.5</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>${jackson.version}</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>${jackson.version}</version>
        </dependency>
        <!-- json所需jar end -->

spring的配置文件所需配置

<!-- 实体 json 自动映射转化 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
        <property name="messageConverters">  
            <list>  
                <ref bean="mappingJacksonHttpMessageConverter" />  
            </list>  
        </property>  
    </bean>  
    <bean id="mappingJacksonHttpMessageConverter"
        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>text/html;charset=UTF-8</value>
                <value>text/json;charset=UTF-8</value>
            </list>
        </property>
    </bean>

Page.java

public class Page<T> {
    private int index;//mybatis在分页时所需的下标
    private int pageNum;// 设置完页码后要设置总数据量才计算start和end
    private int pageTotal;//总页数
    public static final int pageMax = 15;//一页所显示的数据量
    private long totalData;//总数据量
    private int start;//分页栏的起始数
    private int end;//分页栏的终止数

    private List<T> list;//查询得到的数据

    //搜索栏所需的字段
    private String id;
    private String name;
    private char level;
    private String scoreN;
    private String sortType;
    private String sort;
    private double scoreU;// 左
    private double scoreD;// 右

    public Page() {
        this.scoreU = 0;
        this.scoreD = 100;
        this.pageNum = 1;
    }
    //设置总数据量的同时计算分页时起始和终止量
    public void setTotalDate(long totalData) {
        int t = 1;
        if ((int) totalData % pageMax == 0) {
            t = 0;
        }
        this.pageTotal = (int) (totalData / pageMax + t);
        this.totalData = totalData;
        this.start = pageNum - 2;
        if (this.start <= 0) {
            this.start = 1;
        }
        this.end = this.start + 4;
        if (this.end >= pageTotal) {
            this.end = pageTotal;
        }
    }

    // 设置页数时计算当前数据下标
    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
        this.index = (this.pageNum - 1) * pageMax;
    }

控制层的代码

//produces表明返回格式为json,consumes表明接收数据为json,实际上接收表单数据直接用spring自带的自动类型转化会更方便,用json需要额外的配置
@RequestMapping(value = "/searchStudentJson", method = RequestMethod.POST, produces = "application/json",consumes="application/json")
    //表明返回json格式的数据
    @ResponseBody
    public Page<Student> searchStudentJson(@RequestBody Page<Student> pagebean, ModelMap model) {
        //返回一个Page对象
        return studentService.searchStudent(pagebean);
    }

前端数据处理(jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查看成绩</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/resetForm.js"></script>
<script type="text/javascript" src="../js/ajaxSetViewData.js"></script>
<script type="text/javascript">
//为了使用el,只能将js写在外面
    function search(number) {
        var json = {};
        //将表单数据转化为json数组
        var data = $('#form').serializeArray();
        //将json数组转化为json,否则控制层会报错,控制层的修改操作博主并没有找到,只能在js处解决
        $.each(data, function() {
            if (json[this.name]) {
                if (!json[this.name].push) {
                    json[this.name] = [ json[this.name] ];
                }
                json[this.name].push(this.value || '');
            } else {
                json[this.name] = this.value || '';
            }
        })
        json.pageNum = number 
        $.ajax({
            type : "POST",
            dataType : "json",
            //contentType : "application/json",
            url : "${pageContext.request.contextPath}/manager/searchStudentJson",
            data : JSON.stringify(json),
            //$('#form').serialize() 若不使用json,直接使用这个就行了
            success : function(result) {
                createTable(result)
                initPage(result)
                //resetForm(result)
                $('#number').html(result.pagNum)
                $('#numberMax').html(result.pageTotal)
            },
            error : function() {
                alert("出错")
            }
        });
    }
</script>
<script type="text/javascript" src="../js/CheckPage.js"></script>
</head>
<body onload="search(1)">
    <%@include file="主页.jsp"%>
    <div>
        <form action="searchStudent" method="post" id="form">
            <%@include file="searchBar.jsp"%>
            <%@include file="ViewData(JSON).jsp"%>
            <%@include file="page.jsp"%>
        </form>
    </div>
</body>
</html>

动态显示表格数据和分页栏的js

function checkdel(){
    return confirm("真的要删除吗");
}
function createTable(result) {
    $("#body").html("")
    for (var i = 0; i < result.list.length; ++i) {
        var s = "<tr><td>"
                + result.list[i].id
                + "</td>"
                + "<td>"
                + result.list[i].name
                + "</td>"
                + "<td>"
                + result.list[i].chinese
                + "</td>"
                + "<td>"
                + result.list[i].math
                + "</td>"
                + "<td>"
                + result.list[i].english
                + "</td>"
                + "<td>"
                + result.list[i].per
                + "</td>"
                + "<td>"
                + result.list[i].homework
                + "</td>"
                + "<td>"
                + result.list[i].level
                + "</td>"
                + "<td><a href='editStudent?id="+result.list[i].id+"'>编辑</a></td><td><a href='delStudent?id="+result.list[i].id+"' onclick='return checkdel()'>删除</a></td></tr>"
        $("#body").append(s)
    }
}
function initPage(result) {
    var s = ""
    $('#tip').html(s)
    var t;
    if (parseInt(result.pageNum) - 1 < 0) {
        s += "<li><a>上一页</a>"
    } else {
        t = parseInt(result.pageNum) - 1
        s += "<li><a href='javascript: search(" + t + ");'>" + "上一页" + "</a>"
    }
    for (t = parseInt(result.start); t <= parseInt(result.end); t++) {
        if (t != parseInt(result.pageNum)) {
            s += "<li><a href='javascript: search(" + t + ");'>[" + t + "]</a>"
        } else {
            s += "<li><a>[" + t + "]</a>"
        }
    }
    if (parseInt(result.pageNum) + 1 > parseInt(result.pageTotal)) {
        s += "<li><a>下一页</a>"
    } else {
        t = parseInt(result.pageNum) + 1
        s += "<li><a href='javascript: search(" + t + ");'>" + "下一页" + "</a>"
    }
    s += "<li><a href='javascript: search(" + result.pageTotal + ");'>尾页</a>"
    $('#tip').append(s)
}

猜你喜欢

转载自blog.csdn.net/madonghyu/article/details/79491200
今日推荐