plain简单的 普通的
同一个服务器中的 servlet的访问地址不能相同 即使你不用那个类
以前的时候是 客户端页面加载 发到后台 后台查到数据后 再把数据存储到作用域中 ，再把数据返回，在页面展示
现在 作用域移除掉 将数据直接返回 直接在前端里面一行一行的展示(json)
以前 jsp+servlet我们每一次点go都会去刷新页面，只要网络有问题，他的信息加载都会出现问题。现在有了ajax以后，点击go以后，页面不会刷新，同样网络有了延迟以后，他只是在（圈住的黄色区域）会显示错乱，而其他位置还是正常的，你还是可以继续点击其他位置。以前所有的数据都需要加载一遍，比较浪费 现在只加载我们需要的数据，提高了速度 效率
有了ajax以后就不需要用到el和jstl
以前 admin.jsp页面
<c:if test="${empty pageBean }">
<c:redirect url="/news?opr=adminNews">returns;</c:redirect>
</c:if>
<tbody>
<!--ajax给表格添加id 因为我们是往表格里面存数据 也就是追加一行一行的tr -->
<c:forEach items="${pageBean.list }" var="newsDetail">
<tr>
<td>${newsDetail.title }</td>
<td>${newsDetail.author }</td>
<td>
<fmt:formatDate value="${newsDetail.createDate }" pattern="yyyy-MM-dd HH:mm:ss"/>
</td>
<td><a href="adminNewsCreate.jsp?id=2">修改</a> <a href="javascript:delNews${newsDetail.id };">删除</a></td>
</tr>
</c:forEach>
</tbody>
现在使用ajax以后
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.12.4.js" charset="UTF-8"></script>
<script type="text/javascript">
//页面加载时就去查询新闻列表数据（发送ajax请求）
$(function(){
//alert(1);
//url路径建议你写绝对路径 在header.jsp中写一个隐藏域 通过jq获取
$.ajax({
type:"POST",
url:$("#realPath").val()+"/news",
data:{"opr":"adminNews"},//plainObject
dataType:"JSON",
success:function(result){
// alert(result);
//PageBean内存储的新闻列表信息
var list=result.list;
for(var i=0;i<list.length;i++){
var news=list[i];
var trStr="<tr>"
+"<td>"+news.title+"</td>"
+"<td>"+news.author+"</td>"
+"<td>"+news.createDate+"</td>"
+"<td>"
+"<a href='#'>修改</a> ";
+"<a href='#'>删除</a>"
+"</td>"
+"</tr>"
$("#newsList").append(trStr);
}
},
error:function(){
alert("服务器繁忙，请稍后重试");
},
});
});
</script>
header.jsp页面的隐藏域
<input type="hidden" id="realPath" value="${pageContext.request.contextPath }"/>
当controller层里面的代码为下面的时候，在admin.jsp页面进行遍历，时间格式就是不正确的
String pageBeanJson = JSON.toJSONString(pageBean);
解决时间格式问题
js中
//绑定事件
<input type="text" name="username" onblur="checkUser(this.value)"/>
//此处省略部分代码
function checkUser(username){
//获取表单中的value值
alert(username);
//在判断的时候直接根据username进行判断
}
//获取文档中id为xx的元素
var tip=document.querySelector("#xx");
//往里面添加内容
tip.innerHTML="";
jq中
//插入节点子元素
$("a").append("b") (a,b)
//下一个元素
$().next()
//绑定事件
$("input[name=username]").blur(function(){
//获取表单中的value值
var username=$(this).val();
//往id=title的属性中添加内容
$("#title").html("xxx");
//往class=page-num-ul中的第一个li里面添加内容
$(".page-num-ul li:eq(0)").html("");
})
Ajax扩展
jQuery对于JS的Ajax做了封装，封装为了$.ajax()方法，他是最基本的实现
下方几个是基于$.ajax实现的！必须掌握$.ajax()
$.ajax({
url:,
type:,
data:请求数据,
dataType:服务器返回的数据的格式,
success:function(){
},
error:function(){
},
});
1.掌握$.get()使用
$.ajax({
url:,
type:"GET",
data:请求数据,
dataType:服务器返回的数据的格式,
success:function(){
},
error:function(){
},
});
现在的写法：
$.get(url,data,function(result){},dataType);//语法内的参数是固定的
例：
var url="user?username="+username;
//顺序是固定的
$.get(url,function(data){
if(data == "yes"){ // yes 能用 no 不能用
$("#tip").html("<font color='black'>用户名可以使用！</font>");
}else{
$("#tip").html("<font color='red'>这个名称太抢手！</font>");
}
},"text");
2.掌握$.post()使用
$.post(url,data,function(){},dataType);
var url="user";
$.post(url,{"username":username},function(data){
if(data == "yes"){ // yes 能用 no 不能用
$("#tip").html("<font color='lawngreen'>用户名可以使用！</font>");
}else{
$("#tip").html("<font color='red'>这个名称太抢手！</font>");
}
},"text");
3.掌握$.getJSON()使用
$.ajax({
url:,
type:"GET",
data:,
dataType:"JSON",
success:function(){
},
error:function(){
},
});
//现在的写法
$.getJSON(url,[data],function(result){}) GET请求可以省略掉data
//注意json的响应格式必须正确
$ 是jquery的一个对象
4.掌握load()使用
$(选择器).load(); 用来使用Ajax来加载html代码
实现异步不刷新
返回的是html页面的代码
可能存在的问题：样式可能会被jsp代码覆盖掉
next() 根据题意 如果是页面1的某一块内容需要换成页面2的，那就直接替换 next()就不需要写
4.使用jsp改造
<button type="submit" class="page-btn" id="search">GO</button>
<input type="hidden" name="p" value="1"/>
<script type="text/javascript">
function method1(frm,pageNo){
frm.p.value=pageNo;
$("#search").click();
}
<c:choose>
<c:when test="${pageBean.currentPage == 1}">
<a href="javascript:;">首页</a>
<a href="javascript:;">上一页</a>
</c:when>
<c:otherwise>
<a href="javascript:jump_to(document.forms[0],1)">首页</a>
<a href="javascript:jump_to(document.forms[0],${pageBean.currentPage - 1});">上一页</a>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${pageBean.currentPage == pageBean.totalPage}">
<a href="javascript:;">下一页</a>
<a href="javascript:;">尾页</a>
</c:when>
<c:otherwise>
<a href="javascript:jump_to(document.forms[0],${pageBean.currentPage + 1});">下一页</a>
<a href="javascript:jump_to(document.forms[0],${pageBean.totalPage});">尾页</a>
</c:otherwise>
</c:choose>
<span class="page-go-form"><label>跳转至</label>
<input type="hidden" id="totalPage" value="${pageBean.totalPage }"/>
<input type="text" name="inputPage" id="inputPage" class="page-key" />页
<button type="button" class="page-btn" onClick="jump_to(document.getElementById('inputPage').value)">GO</button>
</span>
<script type="text/javascript">
function jump_to(pageNo){
var totalPage=document.getElementById("totalPage").value-0;
var reg=/^[1-9]\d*$/;
if(pageNo==null || pageNo.trim()==""){
alert("内容不能为空");
}else if(pageNo>totalPage || pageNo<1){
alert("输入的页码超出范围！请输入1-"+totalPage+"之间的数值范围！");
}else if(!reg.test(pageNo)){
alert("输入的页码格式非法！");
}else{
method1(document.forms[0],pageNo);
}
}
</script>
4.使用ajax改造
<table id="news-list" cellpadding="1" cellspacing="1" class="admin-list">
<thead>
<tr class="admin-list-head">
<th>新闻标题</th>
<th>作者</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
<button type="button" class="page-btn" id="search">GO</button>
<input type="hidden" name="p" value="1"/>
<script type="text/javascript">
function method1(frm,pageNo){
frm.p.value=pageNo;
$("#search").click();
}
</script>
<span class="page-go-form"><label>跳转至</label>
<input type="text" name="inputPage" id="inputPage" class="page-key" />页
<button type="button" class="page-btn" onClick="jump_to(document.getElementById('inputPage').value)">GO</button>
</span>
<script type="text/javascript">
function jump_to(pageNo){
var totalPage=document.getElementById("totalPage").value-0;
var reg=/^[1-9]\d*$/;
if(pageNo==null || pageNo.trim()==""){
alert("内容不能为空");
}else if(pageNo>totalPage || pageNo<1){
alert("输入的页码超出范围！请输入1-"+totalPage+"之间的数值范围！");
}else if(!reg.test(pageNo)){
alert("输入的页码格式非法！");
}else{
method1(document.forms[0],pageNo);
}
}
</script>
<%-- 路径分不清楚的时候 使用
<input type="hidden" id="realPath" value="${pageContext.request.contextPath }"/>
url:$("#realPath").val()+"/news", --%>
<script type="text/javascript">
$("#search").click(function(){
$("select[name=categoryId],input[name=title]").change(function(){
document.forms[0].p.value=1;
})
var cid=$("select[name=categoryId]").val();
var title=$("input[name=title]").val();
var p=$("input[name=p]").val();
loadAdminNews(cid,title,p);
})
function loadAdminNews(cid,title,p){
$.ajax({
url:"../news",
data:{"opr":"adminNews","categoryId":cid,"title":title,"p":p},
dataType:"JSON",
type:"post",
success:function(result){
$("#news-list tbody").empty();
//pageBean内存储的信息
var newsList=result.list;
for(var i=0;i<newsList.length;i++){
var news=newsList[i];
var trStr="<tr>"+
"<td>"+news.title+"</td>"+
"<td>"+news.author+"</td>"+
"<td>"+news.createDate+"</td>"+
"<td>"+
"<a href='#'>修改</a> "+
"<a href='#'>删除</a>"+
"</td>"+
"</tr>";
$("#news-list").append(trStr);
}
//分页条信息
$(".page-num-ul li:eq(0)").html("共"+result.totalCount+"条记录 "+result.currentPage+"/"+result.totalPage+"页 ");
var indexPageA = "";
var prePageA = "";
var lastPageA = "";
var nextPageA = "";
if(result.currentPage <= 1){
indexPageA = "<a href=\"javascript:;\">首页</a> ";
prePageA = "<a href=\"javascript:;\">上一页</a> ";
}else{
indexPageA = "<a href=\"javascript:method1(document.forms[0],1)\">首页</a> ";
prePageA = "<a href=\"javascript:method1(document.forms[0],"+(result.currentPage - 1)+");\">上一页</a> ";
}
if(result.currentPage >= result.totalPage){
nextPageA = "<a href=\"javascript:;\">下一页</a> ";
lastPageA = "<a href=\"javascript:;\">尾页</a> ";
}else{
nextPageA = "<a href=\"javascript:method1(document.forms[0],"+(result.currentPage + 1)+");\">下一页</a> ";
lastPageA = "<a href=\"javascript:method1(document.forms[0],"+(result.totalPage)+");\">尾页</a> ";
}
//影藏一个总页数
var totalStr="<input type=\"hidden\" id=\"totalPage\" value=\"result.totalPage\"/>";
$(".page-num-ul li:eq(1)").html(indexPageA+prePageA+nextPageA+lastPageA+totalStr);
},
error:function(){
alert("服务器繁忙");
}
})
}
$(function(){
loadAdminNews();
})
后端
/*request.setAttribute("pageBean", pageBean);
request.setAttribute("categoryList", categoryList);
request.setAttribute("categoryId", categoryId);
request.setAttribute("title", title);
//localhost:8080/kgcnews/news?opr=adminNews
request.getRequestDispatcher("pages/admin.jsp").forward(request, response);*/
//FastJson 阿里巴巴出品的 用于json和java对象的转换 需要导包
//pageBean这个对象转换为json字符串
// String pageBeanJson = JSON.toJSONString(pageBean);
//JSON默认情况下 时间格式会解析为时间的毫秒值1233232344
//目前我们知道固定的时间格式 所以在响应的时候直接转换
String pageBeanJson = JSON.toJSONStringWithDateFormat(pageBean,"yyyy-MM-dd");
System.out.println(pageBeanJson);
response.getWriter().print(pageBeanJson);
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
