Ajax+Asp源代码]读取数据库内容的表格(没有用框架)第1/2页
程序员文章站
2022-06-24 16:24:12
功能: 读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码...
功能:
读取数据库内容的表格.读取数据方式为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
}
读取数据库内容的表格.读取数据方式为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
上一篇: Vue+element-ui 实现表格的分页功能示例
下一篇: 图片上传和修改样式