1.访问首页网址：
http://localhost:8080/ssmday4/doIndexUI
2.找到页面显示数据元素的位置
id：#mainContentId
3.指定目录列表“日志管理”功能连接
找到主页上列表的id。
设定JavaScript代码
// 第四阶段--------项目project-------------Day01
// 日志id绑定：load-log-id
$(function(){
$("#load-log-id").click(function(){
var url="log/doLogListUI";
//load函数为一个特殊的ajax函数
$("#mainContentId").load(url);
})
})
4.修改Controller，进行返回页面的绑定
5.修改绑定的html页面，做出响应
由于div页面部分是doPageUI
由此：
<script type="text/javascript">
//作业，补充JS,发异步请求获取数据，呈现在页面上
// 第四阶段 Project ======Day01
$(function(){
$("#pageId").load("doPageUI")
})
</script>
访问：
六、总结过程
过程：
start.html
controller
log_list.html
doPageUI
page.html
<ul class="pagination pagination-sm no-margin pull-right">
<li><a class="first">首页</a></li>
<li><a class="pre">上一页</a></li>
<li><a class="next">下一页</a></li>
<li><a class="last">尾页</a></li>
<li><a class="rowCount">总记录数(0)</a></li>
<li><a class="pageCount">总页数(0)</a></li>
<li><a class="pageCurrent">当前页(1)</a></li>
</ul>
<script type="text/javascript">
$(function(){
$("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
});
function doSetPagination(pageObject){
//1.初始化数据
$(".rowCount").html("总记录数("+pageObject.rowCount+")");
$(".pageCount").html("总页数("+pageObject.pageCount+")");
$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
//2.绑定当前页码以及总页数
$("#pageId").data("pageCurrent",pageObject.pageCurrent);
$("#pageId").data("pageCount",pageObject.pageCount);
}
function doJumpToPage(){
// debugger
//1.获取点击对象的class值
var cls=$(this).prop("class");
//2.基于class值修改pageCurrent的值
var pageCurrent=$("#pageId").data("pageCurrent");
var pageCount=$("#pageId").data("pageCount");
if(cls=="first"){
pageCurrent=1;
}else if(cls=="pre"&&pageCurrent>1){
pageCurrent--;
}else if(cls=="next"&&pageCurrent<pageCount){
pageCurrent++;
}else if(cls=="last"){
pageCurrent=pageCount;
}
//3.绑定当前页码值到pageId对应的元素
$("#pageId").data("pageCurrent",pageCurrent);
//4.重新执行查询操作。
doGetObjects();
}
</script>
展现出：
1.chrome太好用了。
2.先返回请求页面，再响应查询数据
七、显示查询内容div块局部更新内容
$(function(){
$("#pageId").load("doPageUI",function (){
doGetObjects(); //load是异步，doGetObjects也是异步，并列关系会造成抢资源
});
});
function doGetObjects(){
//请求参数
var params={"pageCurrent":1};//"pageCurrent=1"
// 请求url
var url="log/doFindPageObject";
// 发起异步请求
$.getJSON(url,params,function(result){
doHandleResponseResult(result);
});
}
function doHandleResponseResult(result) {
console.log(result);//先控制台打印一下获取到没哟
if(result.state==1){
//初始化table对象中的tbody部分内容
doSetTableBodyRows(result.data.records);
// 初始化分页
// doSetPagination(result.data);
} else {
alert(result.message);
}
}
function doSetTableBodyRows(records) {
//获取tbody对象，清空其内容
var tBody=$("#tbodyId");
tBody.empty();
// 迭代数据 并将数据加到tbody中
for(var i in records){
// 创建tr
var tr=$("<tr></tr>");
// 创建tds
var tds=doCreateTds(records[i]);
// 将tds追加到 tr
tr.append(tds);
// 将tr追加到tbody中
tBody.append(tr);
}
}
//创建当前行的td元素
function doCreateTds(row){
var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+row.id+"'></td>"+
"<td>"+row.username+"</td>"+
"<td>"+row.operation+"</td>"+
"<td>"+row.method+"</td>"+
"<td>"+row.params+"</td>"+
"<td>"+row.ip+"</td>"+
"<td>"+row.time+"</td>";
return tds;
}
八、下一个div分页查询
1.显示总记录数、当前页、总页数-----page.html
<script type="text/javascript">
//在 pageId 对应的div配置容器中.first,.pre,.next,.last上注册点击事件
//在点击时，执行跳转页面函数 doJumpToPage函数
$(function(){
$("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
})
function doSetPagination(pageObject) {
// 1.初始化总记录数 =0
$(".rowCount").html("总记录数("+pageObject.rowCount+")");
// 2.总页数
$(".pageCount").html("总页数("+pageObject.pageCount+")");
// 3.当前页码值
$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
// 4.将当前页码值和总页数进行存储 .data(K,V)
$("#pageId").data("pageCurrent",pageObject.pageCurrent);
$("#pageId").data("pageCount",pageObject.pageCount);
// 说明：data函数为JQuery中的一个函数（作用在对象上临时存储数据）
// 加入不需要 pageCurrent时： removeData("pageCurrent");
}
// 处理分页点击事件
function doJumpToPage() {
// 1.获取当前页的页码，总页数
// 2.基于点击对象修改页码值
// 3.存储当前页码值（临时保存）
// 4.重新执行查询操作
}
.data(K,V) 一个参数K赋值。两个参数K，V取值
说明：data函数为JQuery中的一个函数（作用在对象上临时存储数据）
加入不需要 pageCurrent时： removeData(“pageCurrent”);
2.首页、上一页、下一页、尾页
page.html中
$(function(){
$("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
})
function doSetPagination(pageObject) {
// 1.初始化总记录数 =0
$(".rowCount").html("总记录数("+pageObject.rowCount+")");
// 2.总页数
$(".pageCount").html("总页数("+pageObject.pageCount+")");
// 3.当前页码值
$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
// 4.将当前页码值和总页数进行存储 .data(K,V)
$("#pageId").data("pageCurrent",pageObject.pageCurrent);
$("#pageId").data("pageCount",pageObject.pageCount);
// .data(K,V) 一个参数K赋值。两个参数K，V取值
// 说明：data函数为JQuery中的一个函数（作用在对象上临时存储数据）
// 加入不需要 pageCurrent时： removeData("pageCurrent");
}
// 处理分页点击事件
function doJumpToPage() {
// 1.获取当前页的页码，总页数
var pageCurrent=$("#pageId").data("pageCurrent");
var pageCount=$("#pageId").data("pageCount");
// 2.基于点击对象修改页码值
// 获取点击对象对应的class属性的值
var cls=$(this).prop("class");// .prop取某一个属性的值
if(cls=="first"){
pageCurrent=1;
} else if(cls=="pre"&&pageCurrent>1){
pageCurrent--;
} else if(cls=="next"&&pageCurrent<pageCount){
pageCurrent++;
} else if(cls=="last"){
pageCurrent=pageCount;
}
// 3.存储当前页码值（临时保存）
$("#pageId").data("pageCurrent",pageCurrent);
// 4.重新执行查询操作
doGetObjects();
}
log_list.html中
function doGetObjects(){
//1.请求参数
var pageCurrent=$("#pageId").data("pageCurrent");
if(!pageCurrent)pageCurrent=1;
var params={"pageCurrent":pageCurrent};//"pageCurrent=1";
//基于用户名查询时要向服务端传递参数username
var username=$("#searchNameId").val();
if(username)params.username=username;
//2.请求url
var url="log/doFindPageObject";
//3.发送异步请求获取数据
$.getJSON(url,params,function(result){
//debugger
doHandleResponseResult(result);
});
}
坑：在log_list.html中第一个function的大括号花括号括在了所有函数的最底下，导致无法回调函数。
运行结果：
