//1. initialization
var localDB = null;
function onInit(){
try {
if (!window.openDatabase) {
updateStatus("Error: DB not supported");
}
else {
initDB();
createTables();
queryAndUpdateOverview();
}
}
catch (e) {
if (e == 2) {
updateStatus("Error: Invalid database version.");
}
else {
updateStatus("Error: Unknown error " + e + ".");
}
return;
}
}
function initDB(){
var shortName = 'stuffDB';
var version = '1.0';
var displayName = 'MyStuffDB';
var maxSize = 65536; // in bytes
localDB = window.openDatabase(shortName, version, displayName, maxSize);
}
function createTables(){
var query = 'CREATE TABLE IF NOT EXISTS items(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, amount VARCHAR NOT NULL, name VARCHAR NOT NULL);';
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [], nullDataHandler, errorHandler);
updateStatus("Table 'items' is present");
});
}
catch (e) {
updateStatus("Error: Unable to create table 'items' " + e + ".");
return;
}
}
//2. query db and view update
// event handler start with on*
function onUpdate(){
var id = document.itemForm.id.value;
var amount = document.itemForm.amount.value;
var name = document.itemForm.name.value;
if (amount == "" || name == "") {
updateStatus("'Amount' and 'Name' are required fields!");
}
else {
var query = "update items set amount=?, name=? where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [amount, name, id], function(transaction, results){
if (!results.rowsAffected) {
updateStatus("Error: No rows affected");
}
else {
updateForm("", "", "");
updateStatus("Updated rows:" + results.rowsAffected);
queryAndUpdateOverview();
}
}, errorHandler);
});
}
catch (e) {
updateStatus("Error: Unable to perform an UPDATE " + e + ".");
}
}
}
function onDelete(){
var id = document.itemForm.id.value;
var query = "delete from items where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [id], function(transaction, results){
if (!results.rowsAffected) {
updateStatus("Error: No rows affected.");
}
else {
updateForm("", "", "");
updateStatus("Deleted rows:" + results.rowsAffected);
queryAndUpdateOverview();
}
}, errorHandler);
});
}
catch (e) {
updateStatus("Error: Unable to perform an DELETE " + e + ".");
}
}
function onCreate(){
var amount = document.itemForm.amount.value;
var name = document.itemForm.name.value;
if (amount == "" || name == "") {
updateStatus("Error: 'Amount' and 'Name' are required fields!");
}
else {
var query = "insert into items (amount, name) VALUES (?, ?);";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [amount, name], function(transaction, results){
if (!results.rowsAffected) {
updateStatus("Error: No rows affected.");
}
else {
updateForm("", "", "");
updateStatus("Inserted row with id " + results.insertId);
queryAndUpdateOverview();
}
}, errorHandler);
});
}
catch (e) {
updateStatus("Error: Unable to perform an INSERT " + e + ".");
}
}
}
function onSelect(htmlLIElement){
var id = htmlLIElement.getAttribute("id");
query = "SELECT * FROM items where id=?;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [id], function(transaction, results){
var row = results.rows.item(0);
updateForm(row['id'], row['amount'], row['name']);
}, function(transaction, error){
updateStatus("Error: " + error.code + "<br>Message: " + error.message);
});
});
}
catch (e) {
updateStatus("Error: Unable to select data from the db " + e + ".");
}
}
function queryAndUpdateOverview(){
//remove old table rows
var dataRows = document.getElementById("itemData").getElementsByClassName("data");
while (dataRows.length > 0) {
row = dataRows[0];
document.getElementById("itemData").removeChild(row);
};
//read db data and create new table rows
var query = "SELECT * FROM items;";
try {
localDB.transaction(function(transaction){
transaction.executeSql(query, [], function(transaction, results){
for (var i = 0; i < results.rows.length; i++) {
var row = results.rows.item(i);
var li = document.createElement("li");
li.setAttribute("id", row['id']);
li.setAttribute("class", "data");
li.setAttribute("onclick", "onSelect(this)");
var liText = document.createTextNode(row['amount'] + " x "+ row['name']);
li.appendChild(liText);
document.getElementById("itemData").appendChild(li);
}
}, function(transaction, error){
updateStatus("Error: " + error.code + "<br>Message: " + error.message);
});
});
}
catch (e) {
updateStatus("Error: Unable to select data from the db " + e + ".");
}
}
// 3. misc utility functions
// db data handler
errorHandler = function(transaction, error){
updateStatus("Error: " + error.message);
return true;
}
nullDataHandler = function(transaction, results){
}
// update view functions
function updateForm(id, amount, name){
document.itemForm.id.value = id;
document.itemForm.amount.value = amount;
document.itemForm.name.value = name;
}
function updateStatus(status){
document.getElementById('status').innerHTML = status;
}
分享到:
相关推荐
通过一个例子说明 Web SQL Database 的基本用法。它首先调用 openDatabase 创建了名为“fooDB”的数据库。然后使用 transaction 执行两条 SQL 语句。第一条 SQL 语句创建了名为“foo”的表,第二条 SQL 语句向表中...
web项目系统代码,一个简单的例子,希望对大家有所帮助。
(1) left(database(),1)=’a’,匹配数据库名的第一位,left(database(),2)=’ab’,匹配数据库名的前二位。 同样的string可以为自行构造的sql语句。 图 SEQ 图 \* ARABIC 1 left()的使用 mid():mid(column_name,...
我觉得这个是挺实用的,SQL模糊查询已经在WEB和Winfrom中应用广泛,希望通过这个小小的例子,让更多的Delphi初学者明白模糊查询的语句编写要领和核心方法,所用到的SQLServer数据库文件在Database目录中,...
一个很简单的小例子 using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI....
使用 每当您听到后端,事务, ACID ,可伸缩或类似的词时,就会感到头晕熟悉SQL 在您的下一个踢屁股应用程序中显示一些有意义的数据懒惰的,想从POC过渡到生产就绪的代码,真正快速例子想象一下,您在客户贷款领域中...
我发这个里面的实现只是一个例子. 让大家知道如何调用.. 2. 关于不好向PHP5移植, 我从没想过要移植到PHP5上. 因为如果要移值, 你敢说你的框架不要改.. 恐怕要改的也不在少数.就算你勉强凑合着用上了, PHP5的新...
jdbc(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.statement要求开发者付出大量的时间和精力。在使用statement获取jdbc访问时所具有的一个共通的问题是输入适当格式的日期和...
-- 实用性: 5 (例子丰富,并具有相当强的实用性。) -- 重要性: 4 (对中级人员学习OOP有比较大的参考性。) -- 独创性: 5 (把OO原理贯穿到PHP的各个应用领域, 有比较强的独创性。) -- 写作风格:4 (比较正统的写作...
-Web应用程序中的Poppers 对HTML表格进行排序 版本控制 我使用GIT进行版本控制。 有关可用版本,请参见此存储库上的提交。 作者 Flam3rboy-学生 执照 此项目已获得MIT许可证的许可-有关详细信息,请参阅LICENSE
说明:本工程中的KindEditor删掉了上传图片的功能,所以是一个“轻量级”的KindEditor,“重量级”的KindEditor的应用请参考另一个例子。 本工程编码方式:UTF-8。 使用的数据库:MySQL; 数据库创建:CREATE DATABASE...
<add key="ConnectionString" value="server=.\\SQL2008R2;database=Crawl;uid=sa;password=123456"/> <system.web> <!-- 设置 compilation debug="true" 可将调试符号插入到 已编译的页面。由于这会 ...
家庭食品配送Web应用程序-学术项目。 要求 PHP> = 7.1 MySQL> = 5.7 安装 迁移数据库: mysql -u root -p < db_scripts/db_cookify.sql 然后,您需要输入您MySQL密码。 注意:通常, root是MySQL中的默认...
#学习的101个经典例子,例子个个经典,涵盖C#的方方面面,带有说详尽的注释 Advanced - Multithreading - How-To Async Calls Advanced - Remoting - How-To TCP Remoting Advanced - Serialization - How-To ...
ASP与ADO在Web数据库查询中的应用 不通过数据源完全控制MDB数据库 不用DSN,如何访问数据库? ASP访问SQL Server内置对象 ASP应用中数据库记录的选取与过滤 在ASP中用集合成批操作数据库 IE4的模式对话框设计 ...
本书内容包括核心概念、Informix SQL、服务器管理、安装与维护、性能调整、应用程序开发、Web应用程序和对象关系式数据库等,所附光盘中有大量实用程序、白皮书和与书中内容有关的其他信息。还提供一些Web站点链接....
DbWebApi -------------扩展到ASP.NET Web API(RESTful)它是什么? 使用DbWebApi,您可以从任何http客户端以开箱即用的方式(例如http://BaseUrl/fully_qualified_name_of_stored_procedure/mediatype )以托管...
这里需要说明的就是,这个Demo默认采用的是h2内存数据库,如果想用你自己的数据库,就需要修改web应用WEB-INF/classes目录下的db.properties。然后,按上面说的,把database里的create文件夹里的数据库文件导入你...