而在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连数据库
HTML5连接数据库分为以下几步:预备知识:Web SQL Database,Html5环境下可以用Js执行CRUD的Web数据库组件。
核心方法如下:
1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql:这个方法用于执行真实的SQL查询。
第一步:打开连接并创建数据库
var dataBase = openDatabase("student", "1.0", "student", 1024 * 1024, function () { })
if (!dataBase) {
alert("数据库创建失败!")
} else {
alert("数据库创建成功!")
}
第二步:创建数据表
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)
})
})
}
第三步:执行增删改查
添加数据:
this.insert = function () {
dataBase.transaction(function (tx) {
tx.executeSql(
"insert into stu (id, name) values(?, ?)",
[id, '徐明祥'],
function () { alert('添加数据成功')},
function (tx, error) { alert('添加数据失败: ' + error.message)
} )
})
前端通过接口去访问服务器,服务器通过脚本去取数据库里的数据,并将数据组织成xml或者json数据格式发送给前端,前端使用一个 *** 作句柄进行接收。技术就是采用ajax。可以使用jquery封装好的$.ajax去异步获取后台的数据。直接百度ajax用法:
$.ajax({
type: "POST",
url: url,
data:{},//数据
async: false,//同步
dataType: 'json',
success: function (data) {
alert(JSON.stringify(data))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("报错")
}
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)