AJAX无刷新分页练习
NoRefreshPage.ashx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using WebApplicationAJAX.NoRefreshTableAdapters;
using System.Data;
using System.Web.Script.Serialization;
namespace WebApplicationAJAX
{
/// <summary>
/// NoRefreshPage 的Ì?摘a要°a说¦Ì明¡Â
/// </summary>
public class NoRefreshPage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request.QueryString["action"];
if ("pageCount" == action)
{
int num = Convert.ToInt32(new T_PostMsgTableAdapter().ScalarQueryCout());
int pageNum = (num + 9) / 10;
context.Response.Write(pageNum.ToString());
}
else
{
if ("pageData" == action)
{
int pageId = Convert.ToInt32(context.Request["pageId"]);
NoRefresh.T_PostMsgDataTable dt = new T_PostMsgTableAdapter().GetPageData(pageId, pageId+9);
List<Comment> list = new List<Comment>();
foreach (NoRefresh.T_PostMsgRow item in dt.Rows)
{
Comment comm = new Comment();
comm.IpAddr = item.IpAddr;
comm.Msg = item.Msg;
comm.PostDate = item.PostDate.ToString();
list.Add(comm);
}
JavaScriptSerializer js = new JavaScriptSerializer();
string pageData = js.Serialize(list);
context.Response.Write(pageData);
}
else
{
context.Response.Write("木有传参数");
}
}
//context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
public class Comment
{
public string Msg { get; set; }
public string IpAddr { get; set; }
public string PostDate { set; get; }
}
}
}
NoRefreshPage.htm
主要的JavaScript代码：
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.post("NoRefreshPage.ashx?action=pageData", { "pageId": 1 }, function (data, status) {
if ("success" == status) {
var list = $.parseJSON(data);
for (var i = 0; i < list.length; i++) {
var TablePageDatatr = $("<tr><td>" + list[i].IpAddr + "</td><td>" + list[i].PostDate + "</td><td>" + list[i].Msg + "</td></tr>");
//var ulData = $("<li>哈哈</li>");
//$("#ulData").append(ulData);
$("#TablePageData").append(TablePageDatatr);
}
var TablePageTrue = $("<tr><td>木有数据？应该有吧</td></tr>");
$("#TablePageData").append(TablePageTrue);
}
else {
var tableError = "<tr><td>错误了</td></tr>"
$("#TablePageData").append(TablePageDatatr);
}
});
});
</script>
无刷新删除代码：
主要的代码：
<script type="text/javascript">
$(function () {
$("input[myId=WFXSC]").click(function () {
var id = $(this).attr("itemid");
//alert("点我了" + $(this).attr("itemid"));
$.post("DeleteData.ashx", { "id": id }, function (data, status) {
if ("success" == status) {
if ("ok" == data) {
$("input[itemid=" + id + "]").parent().parent().remove();
$("input[itemid="+id+"]").val("无刷新删除成功");
}
}
else {
}
});
});
});
</script>
