查询功能（Ajax版）

最新推荐文章于 2022-03-27 15:52:36 发布

weixin_34237596

最新推荐文章于 2022-03-27 15:52:36 发布

阅读量879

点赞数 1

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/mondayer/blog/3037116

版权

2019独角兽企业重金招聘Python工程师标准>>>

当服务器启动发起请求时，原来在index.jsp下直接通过<jsp:forward page="/emps"/> 发起请求。

此处，直接将index.jsp 作为列表展示页。

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>SSM_AJAX</title>
    <script src="${ctx}/webjars/jquery/3.3.1-2/jquery.min.js"></script>
</head>
<body>

<h1>SSM_AJAX</h1>

<a href="${ctx}/emp" target="_blank">新增</a>
<a href="#" id="batchDel">批量删除</a>

<table width="50%" id="empTable">
    <thead>
    <tr>
        <td><input type="checkbox" id="checkAll"/></td>
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>邮箱</td>
        <td>部门</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
	<!-- json、DOM 填充内容 -->
    </tbody>
</table>

<br/>

<!-- 展示分页信息 -->
<div id="pageInfoArea"></div>
<div id="pageNavArea"></div>

</body>
</html>

这里不再通过<c:forEah>来遍历取值，而是通过当前页面发送Ajax请求，去后台取数据。且以 json 的格式返回数据，再使用DOM组装。

//保存当前页
var currentPage;

//页面加载时，跳转到首页
$(function () {
	toPage(1);
});

页面加载时，发起Ajax请求获取分页取数据。

//取数据
    function toPage(pageNum) {
        $.ajax({
            url: "${ctx}/emps",
            data: "pageNum=" + pageNum,
            type: "get",
            success: function (result) {
                //构建表格
                buildEmpTable(result);
                //构建分页信息
                buildPageInfo(result);
                //构建分页条
                buildNavaInfo(result);
            }
        });
    }

取得 json 数据后，开始构建表格、分页信息、分页条。

//构建表格
function buildEmpTable(result) {

	//构建前先清空
	$("#empTable tbody").empty();

	var emps = result.data.page.list;

	$.each(emps, function (index, item) {
	    var checkboxTd = $("<td><input type='checkbox' class='checkItem' value='" + item.id + "'/></td>");
	    var id = $("<td>" + item.id + "</td>");
	    var name = $("<td>" + item.name + "</td>");
	    var gender = $("<td>" + (item.gender == 'M' ? '男' : '女') + "</td>");
	    var email = $("<td>" + item.email + "</td>");
	    var deptName = (item.dept != null) ? ($("<td>" + item.dept.name + "</td>")) : ($("<td></td>"));

	    var editBtn = $("<a href='${ctx}/emp/" + item.id + "' target='_blank'>编辑</a>");
	    var delBtn = $("<a href='#' class='del'>删除</a>");
	    var btnTd = $("<td></td>").append(editBtn).append("&nbsp;").append(delBtn);

	    $("<tr></tr>")
		.append(checkboxTd)
		.append(id)
		.append(name)
		.append(gender)
		.append(email)
		.append(deptName)
		.append(btnTd)
		.appendTo($("#empTable tbody"));
	});
}

//构建分页信息
function buildPageInfo(result) {
	//构建前先清空
	$("#pageInfoArea").empty();
	$("#pageInfoArea").append("当前" + result.data.page.pageNum + "页，总" + result.data.page.pages + "页，总" + result.data.page.total + "条记录");

	//保存当前页变量
	currentPage = result.data.page.pageNum;
}

 //构建分页条
function buildNavaInfo(result) {

	//构建前先清空
	$("#pageNavArea").empty();

	// 首页
	var firstPage = $("<a href='#'>首页</a>");
	firstPage.click(function () {
	    toPage(1);
	});
	$("#pageNavArea").append(firstPage).append("&nbsp;");

	//上一页
	var prePage = $("<a href='#'>上一页</a>");
	if (result.data.page.hasPreviousPage) {
	    prePage.click(function () {
		toPage(result.data.page.pageNum - 1);
	    });
	} else {
	    prePage.hide();
	}
	$("#pageNavArea").append(prePage).append("&nbsp;");

	//分页导航条
	$.each(result.data.page.navigatepageNums, function (index, item) {
	    var num = $("<a href='#'></a>").append(item);
	    if (result.data.page.pageNum == item) {
		//使当前页数字体变大
		num.css("font-size", "30px");
	    }
	    num.click(function () {
		toPage(item);
	    });
	    $("#pageNavArea").append(num).append("&nbsp;");
	});

	//下一页
	var nextPage = $("<a href='#'>下一页</a>");
	if (result.data.page.hasNextPage) {
	    nextPage.click(function () {
		toPage(result.data.page.pageNum + 1);
	    });
	} else {
	    nextPage.hide();
	}
	$("#pageNavArea").append(nextPage).append("&nbsp;");


	// 尾页
	var lastPage = $("<a href='#'>尾页</a>");
	lastPage.click(function () {
	    toPage(result.data.page.pages);
	});
	$("#pageNavArea").append(lastPage);
}