Ajax-使用ajax传回来的数据怎样在jsp页面进行分页

意见反馈 意见反馈 主题:991 回复:2082

Ajax-使用ajax传回来的数据怎样在jsp页面进行分页

甜柠檬 发布于 2017-06-17 字数 0 浏览 1038 回复 1

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

偏爱自由 2017-07-30 1 楼

Ajax只是负责不刷新页面的情况向后台发送数据,然后接收后台的数据更新到页面上实现无刷新更新页面,所以分页不是在页面上进行的,而是在servlet里面实现的。
前台和服务器直接通信一般有2种一个是通过json数据,一个是xml文件的形式。我给你个xml形式的前台页面:

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

var js = {
    XMLHttp:null,
    //发送请求函数
    sendRequest:function(url,responseFun,callback){
        //创建XMLHTTPRequest对象
        (function(){

            //根据浏览器类型创建XMLHTTPRequest对象
            if(window.XMLHttpRequest){
                js.XMLHttp = new XMLHttpRequest();
            }
            else{
                try{
                    js.XMLHttp = new ActionXObject("Msxml2.XMLHTTP");
                }catch (e){
                    try{
                        js.XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e0){alert("Microsoft"+e0);}
                }
            }

            })();

        js.XMLHttp.open("POST", url, true);
        js.XMLHttp.onreadystatechange = function(responseFunction){
            if(js.XMLHttp.readyState == 4){
                if(js.XMLHttp.status == 200){
                    responseFun(js.XMLHttp);
                }else{
                    document.getElementById("div").innerHTML = "&lt;font color='red'&gt;连接服务器异常...&lt;/font&gt;"    ;
                }
            }
            else{
                //document.getElementById("div").innerHTML = "&lt;font color='red'&gt;数据加载中...&lt;/font&gt;"    ;   
            }
        };//指定响应函数
        js.XMLHttp.send(null);
        return js.XMLHttp;
    }
}
//响应函数
function responseFunction(xmlhttp){
    var xmlDOM = xmlhttp.responseXML; //接受服务器返回的xml文档
    parse(xmlDOM);//解析XML文档
}

//解析XML文档
function parse(xmlDOM){
    var person = xmlDOM.getElementsByTagName("person");
    var page = xmlDOM.getElementsByTagName("page")[0];
    var currpage = page.getElementsByTagName("currpage")[0].firstChild.data;
    var pagecount = page.getElementsByTagName("pagecount")[0].firstChild.data; 
    var prevpagehtml; 
    var nextpagehtml;
    if((currpage-0)&lt;=1){
        prevpagehtml = "&lt;a&gt;上一页&lt;/a&gt;";
    }else{
        prevpagehtml = "&lt;a onclick='AjaxTest("+(currpage-1)+");' href='javascript:void(0);'&gt;上一页&lt;/a&gt;";
    }
    if((currpage-0)&lt;(pagecount-0)){
        nextpagehtml = "&lt;a onclick='AjaxTest("+(currpage-0+1)+");' href='javascript:void(0);'&gt;下一页&lt;/a&gt;";
    }else{
        nextpagehtml = "&lt;a&gt;下一页&lt;/a&gt;";
    }
    var html = "&lt;table style='font-size: 12px; color: red'&gt;&lt;tr&gt;&lt;td width='80'&gt;编号&lt;/td&gt;&lt;td width='100'&gt;姓名&lt;/td&gt;&lt;td width='80'&gt;年龄&lt;/td&gt;&lt;/tr&gt;";

    for(i=0;i&lt;person.length;i++){
            html = html+ "&lt;tr&gt;&lt;td&gt;"
                       +person[i].getElementsByTagName("pid")[0].firstChild.data+"&lt;/td&gt;&lt;td&gt;"
                       +person[i].getElementsByTagName("pname")[0].firstChild.data+"&lt;/td&gt;&lt;td&gt;"
                       +person[i].getElementsByTagName("age")[0].firstChild.data
                       +"&lt;/td&gt;&lt;/tr&gt;";
    }
    html = html + "&lt;tr &gt;&lt;td width='50'&gt;"+prevpagehtml+"&lt;/td&gt;&lt;td width='100'&gt;共"+pagecount+"页&amp;nbsp;当前第"+currpage+"页&lt;/td&gt;&lt;td width='80'&gt;"+nextpagehtml+"&lt;/td&gt;&lt;/tr&gt;";
    html = html+"&lt;/table&gt;";
    document.getElementById("div").innerHTML=html;
}

//主调函数,以当前页作为参数
function AjaxTest(currpage) {
    js.sendRequest("AjaxServlet?currpage="+currpage,responseFunction,null);
}

</script>

</head>

<body onload="AjaxTest(1);">

<center>

<div id="div"> </div>

</center>

</body>
</html>

然后在AjaxServlet通过前台传过来的参数进行数据处理分页,然后返回给前台!