亲宝软件园·资讯

展开

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

人气:0
想了解Ajax+Asp源代码]读取数据库内容的表格(没有用框架)的相关内容吗,在本文为您仔细讲解的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Ajax+Asp源代码]读取数据库内容的表格(没有用框架),下面大家一起来学习吧。
功能:
读取数据库内容的表格.读取数据方式为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

}


html页面的代码
页面名称:List.htm
复制代码 代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Dynamic of Table - Auntion - Javascript+DOM</title>
<style type="text/css">
/*------------public style--------------*/
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}
/*-------------------------------------*/
#MyTable {
color: #888888;
border-top:1px dashed #d6d6d6;
border-left:1px dashed #d6d6d6;
}
#MyTable td {
height:18px;
text-align: center;
border-right:1px dashed #d6d6d6;
border-bottom:1px dashed #d6d6d6;
padding: 3px 3px 2px 3px;
}
.MyTableTag {
color:#0099FF;
font-size:12px;
font-weight:bolder;
}
#Number {
color:#FF6633;
}
.pages {
border-left:1px dashed #d6d6d6;
border-right:1px dashed #d6d6d6;
border-bottom:1px dashed #d6d6d6;
}
.pagesTag {
color:#0099FF;
}
.status {
color:#666666;
}
.statusContact {
color:#888888;
}
.No {
color:#BBBBBB;
}
</style>
<script language="javascript" type="text/javascript" src="Ajax.Js"></script>
</head>
<body>

<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="0" id="MyTable" >
      <tr>
        <td width="30" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeId">Id</td>
        <td width="140" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeName">Name</td>
        <td width="80" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeSex">Sex</td>
        <td width="50" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeAge">Age</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>
    <table width="300" height="24" border="0" cellpadding="0" cellspacing="0" bgcolor="#F0F9FF" class="pages">
      <tr>
        <td width="36" align="right" valign="middle" class="status" style="padding-left:8px;">Status:
        <input type="hidden" name="PageCount" id="PageCount"/><!--储存分页总数-->
        <input type="hidden" name="PageNow" id="PageNow"/><!--储存当前页码-->
        </td>
        <td id="Status" width="162" align="left" valign="middle" class="statusContact" style="padding-left:2px;">Loading...</td>
        <td id="Pages" width="98" align="center" valign="middle" class="No">Previous│Next</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

数据库为access.
数据库文件名:database.mdb
表名:UserData
字段:Id    Name   Sex   Age
id为编号.其他全部为String.发不上来图,自己看加吧.性别也是普通的文本字段,如果需要yes/no.自己修改一下就可以了

加载全部内容

相关教程
猜你喜欢
用户评论