Ajax+Asp源代码]读取数据库内容的表格(没有用框架)第1/2页

功能:
读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码.
目前还有一个小问题,如果有朋友有兴趣帮我解决一下在下不胜感激
你翻到最后一页的时候如果只有一行会出现空白和undefined.这个问题我试了很多方法一直没有很妥当的解决.
注:下面一些地方出现笑脸表情的是 大写的d
其实很多地方都可以根据asp文件中输出的字符来控制.目前还没有往那方面完善.比如说一列显示多少行等.
Asp页面的代码:
文件名:demo.Asp


代码如下:

'下面这个Sub 是延迟用于调试ajax的loading
<% 
Sub TimeDelaySeconds(DelaySeconds) 
SecCount = 0 
Sec2 = 0 
While SecCount < DelaySeconds + 1 
Sec1 = Second(Time()) 
If Sec1 <> Sec2 Then 
Sec2 = Second(Time()) 
SecCount = SecCount + 1 
End If 
Wend 
End Sub 
TimeDelaySeconds(0)
%>

<%
Response.Expires = -9999 
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-ctrol","no-cache"
Response.Charset = "GB2312"

Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("Database.mdb")
conn.Open connstr
%>

<%
set rs = server.createobject("adodb.recordset")
Sqlstr = "select * from UserData order by id"
rs.open Sqlstr,conn,1,1
rs.PageSize = 3
AllPage = rs.PageCount

Page = request.QueryString ("page")

'***********************判断
if cint(page) =< 1 then
Page = 1
elseif cint(page) >= rs.PageCount then
Page = rs.PageCount
else
intpage = cint(page)
end if
'***************************

rs.AbsolutePage=page

Response.write AllPage&","&rs.AbsolutePage&","

for i = 1 to rs.PageSize
if rs.EOF or rs.BOF then exit for
Response.write rs(0)&","&rs(1)&","&rs(2)&","&rs(3)&","
rs.movenext
next

rs.close
Set rs = nothing
%>

ajax处理的页面代码
文件名:Ajax.js


代码如下:

var request = false;
//------------------判断浏览器并建立对象----------------------------------------------------------------
try {                                                                    //尝试创建 XMLHttpRequest 对象
    request = new XMLHttpRequest();                                         //---此对象将兼容除IE外大部分浏览器!
}                                                                         //-
catch (trymicrosoft) {                                                     //如果失败    catch (trymicrosoft)

try {                                                                     //尝试使用较新版IE兼容的对象(Msxml2.XMLHTTP) 
    request = new ActiveXObject("Msxml2.XMLHTTP");                         //---此对象将兼容老版本IE
}                                                                          //-
catch (othermicrosoft) {                                                 //如果失败    catch (othermicrosoft)

try {                                                                     //尝试使用较老版IE兼容的对象(Microsoft.XMLHTTP)
    request = new ActiveXObject("Microsoft.XMLHTTP");                     //---此对象将兼容新版本IE
}                                                                          //-
catch (failed) {                                                         //如果失败    catch (failed)
    request = false;                                                     //request = false
    alert("Object Error!");
    }
  }
}
defaultPages();
//-------------------------------------------------------------------------------------------------------------*/

//**********读取数据***********************************************************

function defaultPages() {
    var url = "Demo.asp";
    request.open("GET", url, true);                                        //open方法 ("方式",url,是否异步)
    request.onreadystatechange = updatePage;                            //判断服务器处理的结果
    request.send(null);                                                    //送出.
}

function selectPages(Method,Pages) {

//先删除以前的数据
    for(i=0;i<3;i++)
    document.getElementById("MyTable").deleteRow();
    //----------------

if (Method == "Previous"){
    var PageTemp = document.getElementById("PageNow").value;
    var PageNow = parseInt(PageTemp)-1;

//alert (PageNow);//debug

var url = "Demo.asp?Page="+PageNow;
    request.open("GET", url, true);    
    request.onreadystatechange = updatePage;
    request.send(null);
    }

else if (Method == "Next"){
    var PageTemp = document.getElementById("PageNow").value;
    var PageNow = parseInt(PageTemp)+1;

//alert (PageNow);//debug

var url = "Demo.asp?Page="+PageNow;
    request.open("GET", url, true);    
    request.onreadystatechange = updatePage;
    request.send(null);
    }    
}

//***********服务器是否处理完成.**********************************************************************************

function updatePage() {
    if (request.readyState <= 3){                                        //小于或等于状态3----loading.
        document.getElementById("Status").innerHTML = "Loading...";    
        document.getElementById("Pages").innerHTML = "Previous│Next";
    }

if (request.readyState == 4){                                        //状态4----完成.
    if (request.status == 200) {                                         //如果http状态为200--当成功获取获取数据.
        requestAllright();
    }else{                                                            //如果http状态为404--http报错.
        document.getElementById("Status").innerHTML = "Error:" + request.status;
        document.getElementById("Pages").innerHTML = "Previous│Next";
    }
    }
}

//***********处理完成-生成数据.**********************************************************************************

function requestAllright() {
    var getStr = request.responseText;
    var getValue = getStr.split(",");
    var PageCount = getValue[0];
    var PageNow = getValue[1];

var Contact = [
    [getValue[2],getValue[3],getValue[4],getValue[5]],
    [getValue[6],getValue[7],getValue[8],getValue[9]],
    [getValue[10],getValue[11],getValue[12],getValue[13]]
    ];

for (var List=0;List<Contact.length;List++){
      var MyTr = MyTable.insertRow();                                         //创建Tr标签                                             
      for (var Cell=0;Cell<Contact[List].length;Cell++){                     //Td循环
      var MyTd = MyTr.insertCell();                                             //创建Td标签
      MyTd.innerHTML = Contact[List][Cell];                                     //给Td标签插入内容
        if (Cell == 0)                                                         //如果当前为每行的第一个Td                                 
        MyTd.id = "Number";                                                    //赋予其ID为Number
      }    
    }

//上一页下一页处的判断,是否可以点击******************************************************************************************
    if (PageNow == PageCount){
    document.getElementById("Pages").innerHTML = "<a href=javascript:selectPages('Previous','0'); target=_self class=pagesTag>Previous</a>│Next"
    }
    else if (PageNow == 1){
    document.getElementById("Pages").innerHTML = "Previous│<a href=javascript:selectPages('Next','0'); target=_self class=pagesTag>Next</a>"
    }
    else if (PageNow != 1 || PageNow != PageCount){
    document.getElementById("Pages").innerHTML = "<a href=javascript:selectPages('Previous','0'); target=_self class=pagesTag>Previous</a>│<a href=javascript:selectPages('Next','0'); target=_self class=pagesTag>Next</a>"
    }
//上一页下一页处的判断,是否可以点击******************************************************************************************

document.getElementById("PageCount").value = PageCount;
    document.getElementById("PageNow").value = PageNow;
    document.getElementById("Status").innerHTML = "Done with!";

//alert(PageCount);//debug
    //alert(PageNow);//debug

}

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • 在Ajax中使用Flash实现跨域数据读取的实现方法

    Ajax的跨域操作一直是一个难题,现目前主要的解决方法主要有: 1.JSONP(需要在服务器端支持) 2.IFrame(仅能在子域间操作) 3.页面代理(这个有点万能) 4.Access-Control-Allow-Origin(新版浏览器支持,需要在服务器端设置Header) 今天,小子再提供一种使用Flash进行跨域操作的方法.众所周之,其实Flash的跨域操作也是有限制的,不过,Flash的跨域配置比简单,只需要在站点根目录下放置crossdomain.xml即可.至于crossdomai

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

  • JQuery处理json与ajax返回JSON实例代码

    一.JSON的一些基础知识. JSON中对象通过"{}"来标识,一个"{}"代表一个对象,如{"AreaId":"123"},对象的值是键值对的形式(key:value). "[]",标识数组,数组内部各个数据之间通过","分割,如["AreaId":"123","AreaId":"345"]. 很多情况下是

  • ajax读取数据库内容实现二级联动下拉选择菜单示例

    复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码---------------------------</PRE><PRE class=javascript name="code">&l

  • Ajax读取数据到表格的实现代码

    今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内.同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 .将ajax请求的数据显示到该表格内. 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术.如果你还不知道如何使用Asp输出xml请返回:"ajax开始准备篇" 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构.因为我们

  • ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先需要引入jquery.js,主要代码如下: 复制代码 代码如下: function ajax(id,pic){     //由于ThinkPHP不解析JavaScript里的ThinkPHP常量,所以需要先在这里定义. var URL='__URL__';         $.ajax({     

  • Ajax读取数据之分页显示篇实现代码

    我觉得还是有必要把我的ajax分页呈现给大家.我先讲一下这个ajax分页的实现核心,然后我们再看实例效果.所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的.我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页.大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示

  • 用Ajax读取XML格式的数据

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html>  <head>  <title>Ajax Hello World</title>  <script type="text/ja

  • AJAX如何接收JSON数据示例介绍

    简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 复制代码 代码如下: var object = { "labId": "1", "labName": "服装" }; 通常我们使用如上的方式来表示JSON对象,那么数组呢 复制代码 代码如下: var array = [{ "labId": "1", &

  • 如何使用ajax读取Json中的数据

    本文给大家分享一下,如何使用ajax读取Json中的数据. 一.基础知识 什么是json? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言 * JSON 具有自我描述性,更易理解 JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编程语言. JSON - 转换为 JavaScript 对

随机推荐