javascript;Jquery;获取JSON对象，无刷新分页，异步加载，异步删除，实例。
AjaxNewsList:
<!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 () {
window.location = '#p' + this.href.substr(this.href.lastIndexOf('/') + 1); //修改地址栏url，不重载页面。
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 sid=" + newsList[i]["NewsId"] + " class=\"deleteClass\" href=\"javascript:void(0);\" >删除</a>";
tr.appendChild(td);
tbody.appendChild(tr); //附加到tbody节点
}
//绑定删除事件
initDeleteEvents(pageindex);
}
};
xhr.open("Get", "GetNews.ashx?pageindex=" + pageindex, true);
xhr.send(null);
}
//给删除超链接绑定onclick事件。
function initDeleteEvents(pageindex) {
var classNames = document.getElementsByClassName("deleteClass");
for (var a in classNames) {
classNames[a].onclick = function () {
if (window.confirm('真的要删除吗？')) {
//异步请求执行删除
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) {
var _data = xhr.responseText;
if (_data == "1") {
//重新异步加载数据
initNews(pageindex);
alert("删除成功！");
}
}
};
xhr.open("Get", "AjaxDeleteNews.ashx?id=" + this.getAttribute("sid"), 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 ? : int.Parse(context.Request["pageindex"]);
int intPageSizes = ;
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 () {
window.location = '#p' + this.href.substr(this.href.lastIndexOf('/') + 1); //修改地址栏url，不重载页面。
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 sid=" + id + " class=\"deleteClass\" href=\"javascript:void(0);\" >删除</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);
});
//绑定删除事件
initDeleteEvents(pageindex);
});
}
//给删除超链接绑定onclick事件。
function initDeleteEvents(pageindex) {
$("a.deleteClass").click(function () {
if (window.confirm('真的要删除吗？')) {
//异步请求执行删除
$.get("AjaxDeleteNews.ashx", { id: $(this).attr("sid") }, function (_data) {
if (_data == "1") {
//重新异步加载数据
initNews(pageindex);
alert("删除成功！");
}
});
}
});
}
</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对象，无刷新分页，异步加载，异步删除，实例。的更多相关文章
- javascript;Jquery;获取JSON对象，无刷新评论实例。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- ajax分页2：jquery.pagination +JSON 动态无刷新分页
静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery.pagination +JSON 动态无刷新分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...
- jquery获取json对象中的key小技巧
jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
- javascript项目实战---ajax实现无刷新分页
分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
随机推荐
- Harmonic Number 求Hn； Hn = 1 + 1/2 + 1/3 + ... + 1/n; （n<=1e8) T<=1e4; 精确到1e-8； 打表或者调和级数
/** 题目:Harmonic Number 链接:https://vjudge.net/contest/154246#problem/I 题意:求Hn: Hn = 1 + 1/2 + 1/3 + . ...
- Android开发学习秘籍笔记（十九）
吼.花了2天最后做出了一个类似于蓝牙串口助手功能的小程序,事实上也是实习公司的要求---有一个蓝牙无线扫描枪,要求终端能够通过蓝牙连接到该设备,而且蓝牙无线扫描枪扫描二维码或者条形码的时候能够将二维码 ...
- Crontab使用方式
Liunx系统的定时任务需要Crontab来完成 一.添加 添加定时脚本 crontab -e 或者直接编辑/etc/crontab文件进行任务添加 vim /etc/crontab 二.格式 三.举 ...
- ffmpeg中的x264编码选项,对应关系
)’ Disabled. ‘variance (1)’ Variance AQ (complexity mask). ‘autovariance (2)’ Auto-variance AQ (expe ...
- Hibernate每个具体类一张表映射(使用XML)
在每个具体类一个表中,数据库中将有三个表但彼此之间没有关系(关联). 根据具体类策略将表格映射到表有两种方法. 由union-subclass元素指定 通过自我为每个类创建表 我们来了解映射的层次结构 ...
- WPF-Binding对数据的检验
设置Binding的ValidationRules属性对Binding进行检验 <StackPanel> <TextBox x:Name="txtAge" Fon ...
- Android 最新L版本，都更新什么东西了
Android L版本重大修改 一:New Android Runtime (ART) 新的运行环境,4.4一下的版本ART是可选的运行环境,默认还是Dalvik.但是在Android L版本之后默认 ...
- OpenCV学习笔记七：opencv_nonfree模块
一,简介: 顾名思义,这个模块不是free的.主要包含: 1,SIFT implementation. The class implements SIFT algorithm by D. Lowe. ...
- Windows中安装Scrapy
在linux中安装Scrapy只需要导入一些非python的支持包,在windows中安装Scrapy则是一波三折. 总之来说,主要分为以下几个步骤,可能由于系统问题(国内个人机子,甚至是小企业的机子 ...
- SQL Server 阻止了对组件“Ad Hoc Distributed Queries”的 STATEMENT“OpenRowset/OpenDatasource”的访问，因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用 sp_configure 启用“Ad Hoc Distributed Queries”。有关启用“Ad Hoc Distributed Queries”
1.开启Ad Hoc Distributed Queries组件,在sql查询编辑器中执行如下语句: exec sp_configure reconfigure exec sp_configure r ...