javascript;Jquery;获取JSON对象，无刷新分页实例。

js:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 230px;
        }
        .auto-style2 {
            width: 300px;
        }
        .auto-style3 {
            width: 35px;
        }
        .auto-style6 {
            width: 80px;
        }
        .auto-style7 {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            initNews(1);
        };
        function initNews(pageindex) {
            var xhr = null;
            if (typeof (XMLHttpRequest) != undefined) {
                xhr = new XMLHttpRequest();
            }
            else {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //把json字符串转换为json对象。（不安全，这里最好用json2.js或jquery）
                    //var newsList = eval("(" + xhr.responseText + ")");
                    var data = JSON.parse(xhr.responseText); //IE8之前需要引用json2.js
                    //设置分页超链接。
                    document.getElementById("div_PageNavigate").innerHTML = data.pageNavigate;
                    //注册a超链接onclick事件
                    var links = document.getElementById("div_PageNavigate").getElementsByTagName("a");
                    for (var a in links) {
                        links[a].onclick = function () {
                            initNews(this.href.substr(this.href.lastIndexOf(‘/‘)+1));  //取超链接‘/’后面的数字 仿博客园无刷新分页。
                            return false;
                        };
                    }

                    var newsList = data.dataList;
                    var tbody = document.getElementById("tbodyContent"); //获取tbody对象
                    //先清空tbody
                    tbody.innerHTML = "";
                    for (var i = 0; i < newsList.length; i++) {
                        var tr = document.createElement("tr"); //创建tr
                        //{"NewsId":25,
                        //"NewsTitle":"第一条国际新闻",
                        //"NewsContent":"新闻内容，新闻内容，新闻内容，新闻内容，新闻内容，新闻内容，新闻内容",
                        //"NewsIssueDate":"\/Date(1414078309687)\/",
                        //"NewsAuthor":"admin",
                        //"NewsImage":"Upload/BigPic/5/1/12/dcae98a1-a920-42b2-9e2d-c9896c8977dc_25.jpg",
                        //"NewsSmallImage":"Upload/SmallPic/5/1/12/dcae98a1-a920-42b2-9e2d-c9896c8977dc_small25.jpg",
                        //"NewsType":{"TypeId":2,
                        //"TypeName":"国际新闻"}
                        for (var name in newsList[i]) {
                            var td = document.createElement("td"); //创建td
                            var value = newsList[i][name];
                            if (name == "NewsId") { //Id
                                td.innerHTML = value;
                            }
                            else if (name == "NewsTitle") { //标题
                                td.innerHTML = value.length < 50 ? value : value.substring(0, 47) + "...";
                            }
                            else if (name == "NewsContent") {  //内容
                                td.innerHTML = value.length < 80 ? value : value.substring(0, 77) + "...";
                            }
                            else if (name == "NewsIssueDate") {  //日期
                                var da = eval(‘new ‘ + value.replace(‘/‘, ‘‘, ‘g‘));
                                td.innerHTML = da.toLocaleDateString();
                            }
                            else if (name == "NewsAuthor") {  //作者
                                td.innerHTML = value;
                            }
                            else if (name == "NewsSmallImage") {  //图片
                                td.innerHTML = "<img width=\"100\" height=\"100\" src=\"" + value + "\" />";
                            }
                            else if (name == "NewsType") {  //新闻类别
                                td.innerHTML = value.TypeName;
                            }
                            else {
                                continue;  //排除剩余的
                            }
                            tr.appendChild(td);  //附加到tr节点
                        }
                        //添加编辑和删除
                        var td = document.createElement("td");
                        td.innerHTML = "<a href=\"EditNews.aspx?id=" + newsList[i]["NewsId"] + "\">编辑</a>";
                        tr.appendChild(td);
                        var td = document.createElement("td");
                        td.innerHTML = "<a href=\"DeleteNews.ashx?id=" + newsList[i]["NewsId"] + "\" onclick=\"return window.confirm(‘真的要删除吗？‘)\">删除</a>";
                        tr.appendChild(td);

                        tbody.appendChild(tr); //附加到tbody节点
                    }
                }
            };
            xhr.open("Get", "GetNews.ashx?pageindex=" + pageindex, true);
            xhr.send(null);
        }
    </script>
</head>
<body>
    <!--#include file="Top.html"-->
    <div>
        <table border="1">
            <tr>
                <td class="auto-style3">Id</td>
                <td class="auto-style1">标题</td>
                <td class="auto-style2">内容</td>
                <td class="auto-style6">日期</td>
                <td class="auto-style6">作者</td>
                <td class="auto-style7">图片</td>
                <td class="auto-style6">新闻类别</td>
                <td>编辑</td>
                <td>删除</td>
            </tr>
            <tbody id="tbodyContent"></tbody>
        </table>
        <div id="div_PageNavigate"></div>
    </div>
</body>
</html>

GetNews.ashx:

<%@ WebHandler Language="C#" Class="GetNews" %>

using System;
using System.Web;
using System.Web.Script.Serialization;

public class GetNews : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        int pageindex = context.Request["pageindex"] == null ? 1 : int.Parse(context.Request["pageindex"]);
        int intPageSizes = 5;
        int recordCount;
        int pageCount;
        System.Collections.Generic.List<News.Model.Aspx_News> newsList = new News.BLL.Aspx_NewsBll().GetNewsListByPage(intPageSizes, pageindex, out recordCount, out pageCount);

        //生成分页超链接字符串。"GetNews.ashx?pageindex="
        string _pageNavigate = PageClass.strPage(recordCount, intPageSizes, pageCount, pageindex, "p/"); //主要用到p/截取字符串取后面数字。
        var data = new { pageNavigate = _pageNavigate, dataList = newsList };
        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string json = jsSerializer.Serialize(data);
        context.Response.Write(json);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

Jqurey版：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <style type="text/css">
        .auto-style1 {
            width: 230px;
        }
        .auto-style2 {
            width: 300px;
        }
        .auto-style3 {
            width: 35px;
        }
        .auto-style6 {
            width: 80px;
        }
        .auto-style7 {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            initNews(1);
        });
        function initNews(pageindex) {
            $.getJSON("GetNews.ashx", { "pageindex": pageindex }, function (_data) {
                //设置分页超链接。
                $("#div_PageNavigate").html(_data.pageNavigate);
                //注册a超链接onclick事件
                $("#div_PageNavigate a").click(function () {
                    initNews(this.href.substr(this.href.lastIndexOf(‘/‘) + 1));  //取超链接‘/’后面的数字 仿博客园无刷新分页。
                    return false;
                });
                var newsList = _data.dataList;

                $("#tbodyContent").empty(); //先清空tbody
                $.each(newsList, function (key, value) {
                    var id = value.NewsId;
                    var title = value.NewsTitle.length < 50 ? value.NewsTitle : value.NewsTitle.substring(0, 47) + "...";
                    var content = value.NewsTitle.length < 80 ? value.NewsTitle : value.NewsTitle.substring(0, 77) + "...";
                    var issueDate = eval(‘new ‘ + value.NewsIssueDate.replace(‘/‘, ‘‘, ‘g‘)).toLocaleDateString();
                    var author = value.NewsAuthor;
                    var smallImage = "<img width=\"100\" height=\"100\" src=\"" + value.NewsSmallImage + "\" />";
                    var type = value.NewsType.TypeName;
                    var edit = "<a href=\"EditNews.aspx?id=" + id + "\">编辑</a>";
                    var del = "<a href=\"DeleteNews.ashx?id=" + id + "\" onclick=\"return window.confirm(‘真的要删除吗？‘)\">删除</a>";
                    //创建TR
                    var tr = $("<tr><td>" + id + "</td><td>" + title + "</td><td>" + content + "</td><td>" + issueDate + "</td><td>" + author + "</td><td>" + smallImage + "</td><td>" + type + "</td><td>" + edit + "</td><td>" + del + "</td></tr>");
                    $("#tbodyContent").append(tr);
                });
            });
        }
    </script>
</head>
<body>
    <!--#include file="Top.html"-->
    <div>
        <table border="1">
            <tr>
                <td class="auto-style3">Id</td>
                <td class="auto-style1">标题</td>
                <td class="auto-style2">内容</td>
                <td class="auto-style6">日期</td>
                <td class="auto-style6">作者</td>
                <td class="auto-style7">图片</td>
                <td class="auto-style6">新闻类别</td>
                <td>编辑</td>
                <td>删除</td>
            </tr>
            <tbody id="tbodyContent"></tbody>
        </table>
        <div id="div_PageNavigate"></div>
    </div>
</body>
</html>
时间： 2024-08-05 06:56:38

javascript;Jquery;获取JSON对象，无刷新分页实例。的相关文章

javascript;Jquery;获取JSON对象，无刷新评论实例。

  <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascri

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="renmai_PageTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

ajax分页2：jquery.pagination +JSON 动态无刷新分页

aspx 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

jQuery+AJAX+Struts实现无刷新分页

jQuery+AJAX+Struts实现无刷新分页 说明: 1．需要jQuery插件js文件: 2．使用myeclipse添加struts能力: 从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后使用OPEN('GET/POST',URL,同步/异步)设置提交方式,URL地址,使用同步还是异步方式.然后使用send(data)向服务器发送数据,同时使用onreadystatechange来绑定回调函数.如果是使用GET方式提交数据,那么就

jquery+jquery.pagination+php+ajax 无刷新分页

<!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>预约列表</title> <link rel="stylesheet" href="./static/pagination.css"> &

无刷新分页 jquery.pagination.js

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $

无刷新分页代码，jQuery分页完整示例

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery分页演示效果</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js">&l

jQuery模拟无刷新分页效果

<html> <head> <title>jQuery模拟无刷新分页效果|河北苗木|河北金梆子锅炉</title> <script src="/images/jquery-1.4.2.min.js" type="text/javascript"></script> <style type="text/css"> body { font-size:12px; col

jQuery实现的无刷新分页演示效果

<!DOCTYPE html> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现的无刷新分页演示效果丨亿诚-潜水曝气机</title> <script type="text/javascript" src="/images/jqu