一、前提
1.新建Jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>SysLog-Ajax</title>
</head>
<body>
<h1>This is system log list page-Ajax</h1>
<h1>time:<%=new java.util.Date()%></h1>
<div>
<table border="1" width="100%" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>method</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="3">数据加载中...</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
consloe.log("page load complete");
})
</script>
</body>
</html>
2.controller
// 将查询返回的数据和传递的页面分开
@RequestMapping("doLogListUI")
public String doLogListUI(){
// return "jsp/SysLog-AJAX";
return "jsp/SysLog-Jquery-AJAX";
}
向webapp中拷贝常用js文件包
重点！！！！！！配置webapp下的文件可访问引用！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
SpringMVC 中 需要配置 对静态资源文件的访问
方法一，在 spring-servlet.xml 配置文件中加入
<mvc:default-servlet-handler/>
方法二，在 spring-servlet.xml 配置文件中加入
<mvc:resources mapping="/images/**" location="/images/"/> <mvc:resources mapping="/js/**" location="/js/" /> <mvc:resources mapping="/css/**" location="/css/" />
4.修改spring-configs.xml
5.添加jsp页面内容
<%--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>--%>
<script src="../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
console.log("page load complete")
})
</script>
6.访问：http://localhost:8080/ssmday4/log/doLogListUI
7.结果：
二、继续深入练习
1.完善jsp
<%--页面加载完成加载此方法--%>
<script type="text/javascript">
$(function(){
console.log("page load complete");
doGetObject();
})
// 页面加载完成异步加载日志信息
function doGetObject(){
//1.定义请求参数
var params="pageCurrent=1";
//2.定义请求url
var url="doFindPageObject";
//3.发起异步请求
$.ajax({
data:params,
url:url,
type:"GET",
success:function(result){
//ajax请求 请求方式type
console.log(result);
// doHandleResponseResult(result);
}
});
}
</script>
2.访问：http://localhost:8080/ssmday4//log/doLogListUI
结果：会有5s延迟。（Controller中方法的设定Thread.sleep(5000)）
结果是JsonObject。ajax函数底层将服务器返回的jsonString转换成了jsonObject。
Ajax中默认get请求，不写没关系
Ajax里的分号可以省略，但是逗号不可省略
三、进一步完成
错误案例提示：pageCurrent=-1
// 页面加载完成异步加载日志信息
function doGetObject(){
//1.定义请求参数
var params="pageCurrent=-1"; //-1页面是非法错误的
//2.定义请求url
var url="doFindPageObject";
//3.发起异步请求 默认get请求(JQuery构建XmlHttpRequest)，不写没关系
//Ajax里的分号可以省略，但是逗号不可省略
$.ajax({
data:params,
url:url,
type:"GET",
success:function(result){
//ajax请求 请求方式type
//ajax函数底层将服务器返回的jsonString转换成了jsonObject
console.log(result);
doHandleResponseResult(result);
}
});
}
//响应处理结果
function doHandleResponseResult(result) {
if(result.state==1){
// state是我们在JsonResult中自己定义的 1表示OK的
// doSetTableBodyRows(result.data.records);
}else {
alert(result.message);
}
}
访问：http://localhost:8080/ssmday4/log/doLogListUI
结果：
四、进一步完成
//将当前记录追加到tbody位置
function doSetTableBodyRows(records) {
//获取tBody对象
var tBody = $("#tbodyId");
//清空tBody内容
tBody.empty();
//将记录追加到tBody中
for(var i in records){
// 2.1创建tr
var tr=$("<tr></tr>");
// 2.2创建tds
var tds=doCreatTds(records[i]);
// 2.3将td追加到tr
tr.append(tds);
// 2.4将tr追加到tBody
tBody.append(tr);
}
}
function doCreatTds(row){
var tds=
"<td>"+row.id+"</td>"+
"<td>"+row.username+"</td>"+
"<td>"+row.method+"</td>";
return tds;
}
1.追加：
JavaScript是.appendChild
JQuery是.append
访问：http://localhost:8080/ssmday4/log/doLogListUI
结果：
五、尾声
所有jsp页面后期都要改为html 因为jsp
1.翻译成java
2.编译为.class
3.执行代码
4.返回对应html 会影响性能