Ajax局部刷新技术,相比之前的简易论坛的severlet跳转技术,每次改变都会跳转刷新整个页面。Ajax不用刷新整个页面,只是局部刷新。
1.首先在数据库中创建要展示的表,链接数据库,在Javaben中写查询所有要展示内容,这里不再赘述http://blog.csdn.net/sinat_32133675/article/details/74987164
2.编写severlet,在severlet中调用javaben中的方法通过json包返回json文件
将从数据库中的找到的数据(保存在list中),转换成json文件(string类型),代码如下:
//json文件
public String listToJson(List list){
JSONArray json = JSONArray.fromObject(list);
return json.toString();
}
在severlet中编写的代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
UserDao userDao = new UserDao();
int n=userDao.findById(userName);
out.print(n);
out.flush();
out.close();
}
这里只重写了doGet方法,doGet和doPost的区别就是前者在地址栏完成值得传递,后者不在地址栏显示,更安全。(PS:用户登录一定要使用doPost)。与之前的severlet跳转不同,我们可以看到,代码中并没有你跳转页面,这时需要编写一个js的文件调用
3.在jsp页面的布局和jQ代码如下:
jQ+Ajax代码:
$(function(){
function fenye(begin,end){
var t=$("table:eq(0)");
//注意json文件中的所有变量都是局部变量,无法通过值得传递拿出来,这里将长度作为一个属性加到
//标签中,在外面通过标签获取(*********)
$.getJSON("servlet/FristSrv",null,function(k){
//len=$(k).length;
//console.log(len)
//var len=0;
$("table:eq(0) tbody").html("");
var len=$(k).length;
$(k).each(function(i,n){
//alert(n.userName);
if(i<end&&i>=begin){
t.attr({"begin":begin,"end":end,"length":len});
//t.append("<tbody>")
t.append("<tr class='show'><td>"+n.subject+"</td><td>"+n.userName+"</td><td>"+n.createTime+"</td><td>"+n.createTime+"</td><td>"+n.hitCont+"</td></tr>");
//t.append("</tbody>")
}
})
//console.log(len+"---")
})
}
fenye(0,3);//这里设置的每行显示5个元素,初始化首页的显示0-5
$("#nextpage").click(function(){
var begin =parseInt( $("table:eq(0)").attr("begin"))+3;
var end =parseInt( $("table:eq(0)").attr("end"))+3;
var len = parseInt($("table:eq(0)").attr("length"));
//console.log(end);
if(end-3<len)
{
//$(".show").hide();//每点一次增加5条,这里的隐藏式隐藏已经有的
//$("table:eq(0)").html("");
fenye(begin,end);
}
})
$("#lastpage").click(function(){
var pagesize = 0;
var len = parseInt($("table:eq(0)").attr("length"));
if(len%3==0){
pagesize=parseInt(len/3);
}else{
pagesize=parseInt(len/3)+1;
}
//console.log(len);
var begin=(pagesize-1)*3;
var end=(pagesize-1)*3+3;
fenye(begin,end);
})
$("#fristpage").click(function(){
fenye(0,3);
})
$("#previouspage").click(function(){
var begin =parseInt( $("table:eq(0)").attr("begin"))-3;
var end =parseInt( $("table:eq(0)").attr("end"))-3;
var len = parseInt($("table:eq(0)").attr("length"));
//console.log(end);
if(end-3>=0)
{
//$(".show").hide();//每点一次增加5条,这里的隐藏式隐藏已经有的
//$("table:eq(0)").html("");
fenye(begin,end);
}
})
})
代码中点击下一页,上页已经显示的内容就要隐藏掉,原来使用的.hide()方法。后来,考虑到工作中表页数过多的可能性,选择将上页内容通过.html(“”)清零。但是由于我的表内容是动态生成的,表头在jsp中单独打出来的,清零的时候会把表头顺表清掉。(这里卡了我好久)
解决方法:在jsp的表头文件用<thead>
标签包起来,动态生成表内容的部分就会自动划分为<tbody>
的内容(在sougou浏览器中是这样,其他效果我没试),每次点击按钮都会调用代码$("table:eq(0) tbody").html("");
清掉点击之前展示的内容。
效果展示: