html5怎么连接数据库?

html5怎么连接数据库?,第1张

在HTML5之前的时代,如果需要在客户端本地保存数据,只能存储在Cookie中,但是 Cookie使用过多会影响请求速度 ,所以并不适合存储大量数据。 而在HTML5面世后,自带了本地存储和本地数据库功能,更为便捷的管理客户端数据。 HTML5提供了一个 基于浏览器端的数据库 (WebSQL 、IndexedDB),我们可以通过JS API来在浏览器端创建一个本地数据库,而且它还支持标准的SQL来执行CRUD *** 作。如何查看本地的数据库呢?通过各个 浏览器的调试工具 可以查看。在HTML5中 *** 作本地数据库都是通过JS API来实现的,很简单,步聚如下:1、通过 openDatabase 创建数据库对象 2、通过 db.transaction 设置回调函数 3、通过 executeSql 方法执行查询HTML5默认情况下是无法连接远程数据库的,一般都是通过API去 *** 作数据库。比如当下流行的前后端完全分离,借助的就是RESTful来实现业务数据的CRUD *** 作。 怎么会问这个问题,HTML是不可能链接数据库的,他是标签类语言,是用于构建静态页面的,要想链接数据库必须得支持网络通信和IO的,显然HTML并没有支持,HTML只是用来设计页面的。 我还以为我落伍了,h5连数据库

站点建了,DW也管理了,数据库表也建了,还小添了一下。那下面就开用DW还算强大的功能:连接数据库并且显示纪录。

1,打开DW,在站点里面先新建个ASP页面(index.asp)。 在“应用程序”面板中选中“数据库”标签。只要我们在前面建立了站点,选择了文档类型(即我们选的ASP Javascript的),并且还测试了服务器(http://localhost/newgn/);则当前我们看到就剩下第四步没有打勾了。那现在就点击“+”号,选择“自定义连接字符串”。

2,在d出来的“自定义连接字符串”对话框中,"连接名称"随便写一个。“连接字符串”就要好好填写了。当"使用此计算机上的驱动程序"时应用绝对路径:

DRIVER={Microsoft Access Driver (*.mdb)}DBQ=d:/newgn/database/cnbruce.mdb

否则“使用测试服务器上的驱动程序”采用Mappath转换路径 :

"Driver={Microsoft Access Driver (*.mdb)}DBQ="&server.mappath("/newgn/database/cnbruce.mdb")

注:如果将要上传到网上去的页子就可以直接采用Mappath了。(有关Mappath的文章见http://www.cnbruce.com/blog/showlog.asp?cat_id=26&log_id=423)

点击“测试”,出现成功即爽。

附注:需要更多了解的,可以打开DW的帮助教程。

3,成功连接数据库后,在DW里其实是自动生成了一个连接文件。位置在自动生成的Connections文件夹中,名称是你刚才在“自定义连接字符串”随便敲的为命名asp文件。还可以注意到DW数据库标签内看到mdb文件内的各个字段。

4,连接数据库的文件是有了,但下面我们具体的单个页面怎么和数据库挂钩呢。选择“绑定”标签,添加“记录集(查询)”。单看字面意思就知道是来SQL查询语句了。

5,在d出的“记录集”窗口中,“名称”随便写个吧,也可不写,默认的。但"连接"就要从下拉列表中选择你定义的连接对象了,“表格”继续下拉选择(注:这和设计数据库的时候有几张表相关的)。

6,其它随便看下,其实最主要的是自动生成了SQL语言,点选“高级...”,可以看到如下图

7,确定后,你会发现记录集已经绑定,所有数据库中的字段都显现出来。

再注意下面有“插入”按钮,完全可以将某个字段选中,或按按钮或拖动到index.asp页面即可。该asp页面就显示数据库里面内容了。但只能显示首行的,要想全部显示。。。。Next

8,“插入”工具栏“应用程序”标签中选择“动态表格”。

9,d出的动态表格中选择已经帮定的记录集,显示几条记录明白说就是分页程序的生成:数据的记录多,内容多,就分好几页来显示,每页几条。记录是用表格自动生成显示出来的,再设下表格的属性。

确定后效果如下:

10,可以告诉你,基本差不多了。F12看看效果

那么现在暂搞一段落,你已经学会怎么连数据库,怎么显示库表中的记录了。等待你的就是下面怎么插入新的记录,怎么修改记录等等。。。。

HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来 *** 作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API:openDatabase、transaction、executeSql。

Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来 *** 纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持Web SQL Database。HTML5的Web SQL Databases的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来 *** 作本地数据库时,你会发现这东西挺有趣的。今天,我们一起来了解HTML 5的Web SQL Database API。

下面将一一将介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 。

先介绍三个核心方法

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql:这个方法用于执行真实的SQL查询。

第一步:打开连接并创建数据库

代码如下:

var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { })

if (!dataBase) {

alert("数据库创建失败!")

} else {

alert("数据库创建成功!")

}

解释一下openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:

1,数据库名称。

2,版本号 目前为1.0,不管他,写死就OK。

3,对数据库的描述。

4,设置数据的大小。

5,回调函数(可省略)。

初次调用时创建数据库,以后就是建立连接了。

创建的数据库就存在本地,路径如下:

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_4987 。

创建的是一个sqllite数据库,可以用SQLiteSpy打开文件,可以看到里面的数据。SQLiteSpy是一个绿色软件,可以百度一下下载地址或SQLiteSpy官方下载:SQLiteSpy。

第二步:创建数据表

代码如下:

this.createTable=function() {

dataBase.transaction( function(tx) {

tx.executeSql(

"create table if not exists stu (id REAL UNIQUE, name TEXT)",

[],

function(tx,result){ alert('创建stu表成功')},

function(tx, error){ alert('创建stu表失败:' + error.message)

})

})

}

解释一下,

executeSql函数有四个参数,其意义分别是:

1)表示查询的字符串,使用的SQL语言是SQLite 3.6.19。

2)插入到查询中问号所在处的字符串数据。

3)成功时执行的回调函数。返回两个参数:tx和执行的结果。

4)一个失败时执行的回调函数。返回两个参数:tx和失败的错误信息。

第三步:执行增删改查

1)添加数据:

代码如下:

this.insert = function () {

dataBase.transaction(function (tx) {

tx.executeSql(

"insert into stu (id, name) values(?, ?)",

[id, '徐明祥'],

function () { alert('添加数据成功')},

function (tx, error) { alert('添加数据失败: ' + error.message)

} )

})

2)查询数据

代码如下:

this.query = function () {

dataBase.transaction(function (tx) {

tx.executeSql(

"select * from stu", [],

function (tx, result) { //执行成功的回调函数

//在这里对result 做你想要做的事情吧...........

},

function (tx, error) {

alert('查询失败: ' + error.message)

} )

})

}

解释一下

上面代码中执行成功的回调函数有一参数result。

result:查询出来的数据集。其数据类型为 SQLResultSet ,就如同C#中的DataTable。

SQLResultSet 的定义为:

代码如下:

interface SQLResultSet {

readonly attribute long insertId

readonly attribute long rowsAffected

readonly attribute SQLResultSetRowList rows

}

其中最重要的属性—SQLResultSetRowList 类型的 rows 是数据集的“行” 。

rows 有两个属性:length、item 。

故,获取查询结果的某一行某一列的值 :result.rows[i].item[fieldname] 。

3)更新数据

代码如下:

this.update = function (id, name) {

dataBase.transaction(function (tx) {

tx.executeSql(

"update stu set name = ? where id= ?",

[name, id],

function (tx, result) {

},

function (tx, error) {

alert('更新失败: ' + error.message)

})

})

}

4)删除数据

代码如下:

this.del = function (id) {

dataBase.transaction(function (tx) {

tx.executeSql(

"delete from stu where id= ?",

[id],

function (tx, result) {

},

function (tx, error) {

alert('删除失败: ' + error.message)

})

})

}

5)删除数据表

代码如下:

this.dropTable = function () {

dataBase.transaction(function (tx) {

tx.executeSql('drop table stu')

})

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7247868.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存