首页 > 代码库 > javascript;Jquery;获取JSON对象，无刷新分页实例。
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=http://www.mamicode.com/"" + value + "\" />"; } else if (name == "NewsType") { //新闻类别 td.innerHTML = value.TypeName; } else { continue; //排除剩余的 } tr.appendChild(td); //附加到tr节点 } //添加编辑和删除 var td = document.createElement("td"); td.innerHTML = "<a href=http://www.mamicode.com/"EditNews.aspx?id=" + newsList[i]["NewsId"] + "\">编辑</a>"; tr.appendChild(td); var td = document.createElement("td"); td.innerHTML = "<a href=http://www.mamicode.com/"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 = http://www.mamicode.com/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=http://www.mamicode.com/"" + value.NewsSmallImage + "\" />"; var type = value.NewsType.TypeName; var edit = "<a href=http://www.mamicode.com/"EditNews.aspx?id=" + id + "\">编辑</a>"; var del = "<a href=http://www.mamicode.com/"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>
javascript;Jquery;获取JSON对象，无刷新分页实例。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。