asp.net+ajax简单分页实例分析_AJAX相关

本文实例讲述了asp.net+ajax简单分页实现方法。分享给大家供大家参考，具体如下：

这里涉及两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据，后一个用来对分页进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：

/*testJs.js*/
// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }
// 创建 XMLHttpRequest对象，以发送ajax请求
function createXMLHTTP() {
 var xmlHttp = false;
 var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
       "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
       "Microsoft.XMLHTTP"];
 for (var i = 0; i < arrSignatures.length; i++) {
  try {
   xmlHttp = new ActiveXObject(arrSignatures[i]);
   return xmlHttp;
  }
  catch (oError) {
   xmlHttp = false; //ignore
  }
 }
 // throw new Error("MSXML is not installed on your system.");
 if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
 }
 return xmlHttp;
}
//window.onload = showPages(1, 10, 100);
//cP目前页码, tP总页数 ,tN总记录数
function showPages(cP, tP, tN) {
 //处理页码大于总页数
 if (cP >= tP) {
  cP = tP;
 }
 //处理页码小于1
 if (cP < 1) {
  cP = 1;
 }
 var trPg = $("trPager");
 var newCellOne = trPg.insertCell(0);
 newCellOne.width = "20%";
 var newCellTwo = trPg.insertCell(1);
 newCellTwo.width = "15%";
 newCellTwo.id = "pgSummary";
 var newCellThree = trPg.insertCell(2);
 newCellThree.width = "45%";
 newCellThree.id = "pgNumContext";
 var newCellFour = trPg.insertCell(3)
 newCellFour.width = "20%";
 newCellTwo.innerHTML = "共<span id='totalNum'>" + tN + "</span>项 第<span id='cuPgNumber' style='color:red'>" + cP + "</span>/<span id='sumPgNumber' >" + tP + "</span>页";
 var pageHtml = " <a href='#' onclick='gotoPage(1)'>首页</a>";
 pageHtml += "<a id='prevPg' href='#' onclick='goToNextPrev(-1)'> 上页 </a>";
 for (var i = 1; i < tP + 1; i++) {
  var numColor = "";
  if (i == 1) numColor = "red";
  pageHtml += "<a id='numPg" + i + "' style='color:" + numColor + "' href='#' onclick='gotoPage(" + i + ")'>" + i + " </a>";
 }
 pageHtml += "<a id='nextPg' href='#' onclick='goToNextPrev(1)'> 下页</a>";
 pageHtml += "<a href='#' onclick='gotoPage(" + tP + ")'> 尾页</a>";
 pageHtml += " <input name='pgNumber' type='text' id='pgNumber' size='3' onKeyPress='return handleEnterOnPgNumber();'> " +
   "<input name='goto' type='button' id='goto' value='go' onClick='forward()'>";
 newCellThree.innerHTML = pageHtml;
}
//构造页面跳转的js函数，函数中需要判断输入的页号是否是合法的数值
function forward() {
 if (!(/^([-]){0,1}([0-9]){1,}$/.test($("pgNumber").value))) {
  //输入的值不合法
  alert("请输入合法的页号！");
  $("pgNumber").focus();
  $("pgNumber").select();
 }
 else
  gotoPage($("pgNumber").value);
}
//处理在跳转页面上按下回车的情况
function handleEnterOnPgNumber() {
 if (event.keyCode == 13) {
  forward();
  return false;
 }
 return true;
}
function gotoPage(oNum) { // 页数不能为0或者为负数 (首页，尾页)
 if (oNum > 0) {
  var totalNumber = parseInt($("totalNum").innerText); //总记录数
  var curPgNumber = parseInt($("cuPgNumber").innerText);
  var totalPgNumber = parseInt($("sumPgNumber").innerText); // 总页数
  if (parseInt(oNum) <= totalPgNumber) {
   chgPages(oNum, totalPgNumber, totalNumber);
   for (var k = 1; k < totalPgNumber + 1; k++) {
    $("numPg" + k).style.color = "";
   }
   $("numPg" + oNum).style.color = "red";
   getPagerInfo(oNum);
  }
  else {
   alert("请输入合法的页号！");
   $("pgNumber").focus();
   $("pgNumber").select();
   return;
  }
 }
}
function goToNextPrev(oNum) {
 var addNum = parseInt(oNum);
 var totalNumber = parseInt($("totalNum").innerText); //总记录数
 var curPgNumber = parseInt($("cuPgNumber").innerText);
 var totalPgNumber = parseInt($("sumPgNumber").innerText); // 总页数
 //如果当前页是第一页，点击前一页不用刷新 //如果当前页是最后一页，点击下一页不用刷新
 if ((curPgNumber + addNum) > 0 && (curPgNumber + addNum) <= totalPgNumber) {
  chgPages(parseInt(curPgNumber + addNum), totalPgNumber, totalNumber);
  for (var k = 1; k < totalPgNumber + 1; k++) {
   $("numPg" + k).style.color = "";
  }
  $("numPg" + parseInt(curPgNumber + addNum)).style.color = "red";
  getPagerInfo(parseInt(curPgNumber + addNum));
 }
}
function chgPages(cuPg, toPg, tNum) {
 // $("totalNum").innerHTML = tNum;
 $("cuPgNumber").innerHTML = cuPg;
 //$("sumPgNumber").innerHTML = toPg;
}
function getPagerInfo(oNum) { // 处理请求，更新内容
 var xmlReq = createXMLHTTP();
 xmlReq.open("post", "/AjaxOperations.aspx?pgNumber=" + oNum, true);
 xmlReq.onreadystatechange = function() {
  if (xmlReq.readyState == 4) {
   if (xmlReq.status == 200) {
    //xmlReq.responseText为输出的那段字符串
    $("tbTest").innerHTML = xmlReq.responseText;
   }
   else {
    $("tbTest").innerHTML = "　　获取数据中，请稍等．．．";
    //alert("Connect the server failed!");
   }
  }
 }
 xmlReq.send(null);
}

Default.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebTest2008.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <script src="js/testJs.js" type="text/javascript"></script>
 <style type="text/css">
 A:link
 {
 color: #003399;
 text-decoration: none;
 }
 A:visited
 {
 color: #003366;
 text-decoration: none;
 }
 A:hover
 {
 color: #ff0000;
 text-decoration: underline;
 }
 A:active
 {
 color: #00ff00;
 text-decoration: none;
 }
 </style>
 <title></title>
</head>
<body onload="showPages(1, 10, 100)">
 <form id="form1" runat="server">
 <div>
 <div style="text-align: center" id="tbTest">
 第1页</div>
 <table cellspacing="0" style="width: 100%; height: 30px" border="0" align="center">
 <tr id="trPager">
 </tr>
 </table>
 </div>
 </form>
</body>
</html>

Default.aspx.cs：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
 public partial class Default : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {
  }
 }
}

AjaxOperations.aspx：

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>

AjaxOperations.aspx.cs：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebTest2008
{
 public partial class AjaxOperations : System.Web.UI.Page
 {
  protected void Page_Load(object sender, EventArgs e)
  {
   if (!string.IsNullOrEmpty(Request["pgNumber"]))
   {
    //int pgNum = Convert.ToInt32(Request["pgNumber"]);
    Response.Write("第" + Request["pgNumber"] + "页");
   }
  }
 }
}

Ok了，在我的机器上（vs2008）测试通过，简单的ajax分页效果就实现了。

希望本文所述对大家ajax程序设计有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax
， asp.net
， ajax分页
分页
，以便于您获取更多的相关知识。

时间： 2024-10-27 12:21:46

asp.net+ajax简单分页实例分析_AJAX相关的相关文章

asp.net+ajax简单分页实例分析

本文实例讲述了asp.net+ajax简单分页实现方法.分享给大家供大家参考,具体如下: 这里涉及两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来显示一些测试数据,后一个用来对分页进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: /*testJs.js*/ // 此函数等价于document.getElementById /document.all fun

AJAX简单异步通信实例分析_AJAX相关

本文实例讲述了AJAX简单异步通信的方法.分享给大家供大家参考.具体分析如下: 客户端:向服务器发出一个空请求. 代码如下: <html> <head> <title>XMLHttpRequest</title> <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHtt

原生AJAX写法实例分析_AJAX相关

本文实例分析了原生AJAX写法.分享给大家供大家参考.具体分析如下: 虽然现在很多JS的框架提供了AJAX的调用方法,我们甚至不用去了解其具体的实现原理就可以直接调用了,但是我认为不去从最基础的层面了解一个东西,就很难做到最好. var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE内核,这里早期IE的版本写法不

asp.net实现简单分页实例_实用技巧

本文实例讲述了asp.net实现简单分页的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: /// <summary> /// 分页内容 /// </summary> /// <param name="size">页面大小</param> /// <param name="count">页面数量</param> /// <param name="curren

原生ajax调用数据实例讲解_AJAX相关

由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分 function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest()

一个简单Ajax类库及使用方法实例分析_AJAX相关

本文实例讲述了一个简单Ajax类库及使用方法.分享给大家供大家参考,具体如下: ajax.js function Ajax(recvType){ var aj=new Object(); aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML aj.targetUrl=''; aj.sendString=''; aj.resultHandle=null; aj.createXMLHttpRequest=function(

AJAX简单异步通信实例分析

本文实例讲述了AJAX简单异步通信的方法.分享给大家供大家参考.具体分析如下: 客户端:向服务器发出一个空请求. 代码如下: <html> <head> <title>XMLHttpRequest</title> <script language="javascript"> var xmlHttp; function createXMLHttpRequest(){ if(window.ActiveXObject) xmlHtt

Ajax异步提交数据返回值的换行问题实例分析_AJAX相关

本文实例分析了Ajax异步提交数据返回值的换行问题.分享给大家供大家参考,具体如下: 前面分析介绍了<Javascript基于AJAX回调函数传递参数>及<IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别>,学习了ajax回调函数传参与针对不同浏览器处理中文乱码问题的方法.这里就来分析一下ajax异步提交返回值中换行问题的处理技巧. 背景介绍: 需要实现的功能是:在下拉框中选择分类,提交到PHP根据选择的分类返回该分类下的成员名称,返回值各成员姓名以换行的形式显示到tex

ajax异步加载图片实例分析_AJAX相关

本文实例讲述了ajax异步加载图片的方法.分享给大家供大家参考,具体如下: 图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效).如果是通过定时更换img的src属性来实现图片的动态更换,由此带来的闪烁更让它难以接受,这可不是用alt属性就能让人愉快的. 联系时下比较热门的,号称"无"刷新的AJAX技术,利用XMLHttpRequest对象发起异步请求,待图像加载完毕再动