日期:2014-05-16  浏览次数:20633 次

自己写的ajax翻页效果,模仿yii框架
<!DOCTYPE html>
<html>
<head>
    <title>ajax分页</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        function loadXMLDoc($url)
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var $data = $('<div>' + xmlhttp.responseText + '</div>');
//                    alert($("#updateId", $data).html());
                   // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    $("#updateId").replaceWith($("#updateId", $data));
                }
            }
            xmlhttp.open("GET",$url,true);
            xmlhttp.send();
        }
    </script>
</head>


<body>


<table id="updateId">
    <tr><td>id</td><td>标题</td><td>时间</td></tr>
    <?php if(isset($_GET['p'])&&$_GET['p'] == 2): ?>
        <tr><td>2</td><td>222</td><td>222</td></tr>
        <tr><td>2</td><td>222</td><td>222</td></tr>
    <?php else: ?>
        <tr><td>1</td><td>111</td><td>111</td></tr>
        <tr><td>1</td><td>111</td><td>111</td></tr>
    <?php endif; ?>


</table>
<div><a href="javascript:;" onclick="loadXMLDoc('?p=1')">1</a><a href="javascript:;" onclick="loadXMLDoc('?p=2')">2</a></div>


</body>
</html>
1楼GJYSK10小时前
效果不错!