纯HTML访问数据库,Sql和Access

偶然看到一篇博文,发现纯HTML居然可以连接数据库,惊的嘴半天合不上,于是突发奇想,是不是以后开发软件都可以使用HTML呢?

随便找了个数据库,需要测试的朋友记得更改为自己的数据库,并且将数据库和测试页面放置同一个目录。

理论上应该还可以连接sqlite3数据库,具体的没测试。

抛砖引玉,有兴趣的瞅瞅。

 

访问Access数据库:

本例测试页面ccc.html,数据库名:SiteWeaver.mdb

<html>
<head>
<title>get data from database at client</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
<!--
body{font-family:Times New Roman;font-size:9pt;}
table{font-family:Times New Roman;font-size:9pt;}
button{color:blue;}
//-->
</style>
<script language="Javascript">
<!--
 function connectDB()
 {
 try{
 var count=0;
 var conn=new ActiveXObject("ADODB.Connection");
 var rs=new ActiveXObject("ADODB.Recordset");
 var filePath = location.href.substring(0, location.href.indexOf("ccc.html"));
 var path = filePath + "SiteWeaver.mdb";
 var path=path.replace('file:///','')
 var connectString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+path;
 var selectString="select top 5 * from PE_Admin";
 var tableString="";
 conn.open(connectString);

 rs=conn.execute(selectString);
 while(!rs.EOF)
{
 if(count++==0)
 {
 tableString+="<table border='1'><tr><td>"+rs(0)+"</td>";
 tableString+="<td>"+rs(1)+"</td></tr>";
 }
 tableString+="<tr><td>"+rs(0)+"</td>";
 tableString+="<td>"+rs(1)+"</td></tr>";
 rs.moveNext();
 }
 tableString+="</table><br>";
 document.getElementById("dataArea").innerHTML=tableString;
 rs.close();
 conn.close;
}
catch(e)
 {
 document.write(e.toString());
 }
}
//-->
</script>
</head>
<body>
<div id="dataArea"></div>
<button οnclick="connectDB();">retrieve data</button> 
 </body>
</html>

 

SQL数据库访问:

本例测试页面:ccc.html,数据库名:SiteWeaver,用户名和密码:SiteWeaver,数据源:local

<html>
<head>
<title>get data from database at client</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
<!--
body{font-family:Times New Roman;font-size:9pt;}
table{font-family:Times New Roman;font-size:9pt;}
button{color:blue;}
//-->
</style>
<script language="Javascript">
<!--
 function connectDB()
 {
 try{
 var count=0;
 var conn=new ActiveXObject("ADODB.Connection");
 var rs=new ActiveXObject("ADODB.Recordset");
 var connectString="provider=sqloledb.1;user id=SiteWeaver;password=SiteWeaver;data source=(local);Initial Catalog=SiteWeaver";
 var selectString="select top 5 * from PE_Admin";
 var tableString="";
 conn.open(connectString);

 rs=conn.execute(selectString);
 while(!rs.EOF)
{
 if(count++==0)
 {
 tableString+="<table border='1'><tr><td>"+rs(0)+"</td>";
 tableString+="<td>"+rs(1)+"</td></tr>";
 }
 tableString+="<tr><td>"+rs(0)+"</td>";
 tableString+="<td>"+rs(1)+"</td></tr>";
 rs.moveNext();
 }
 tableString+="</table><br>";
 document.getElementById("dataArea").innerHTML=tableString;
 rs.close();
 conn.close;
}
catch(e)
 {
 document.write(e.toString());
 }
}
//-->
</script>
</head>
<body>
<div id="dataArea"></div>
<button οnclick="connectDB();">retrieve data</button>
</body>
</html>

 

  • 6
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值