`

【转】html5 Web SQL Database应用例子

阅读更多
//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;
}
分享到:
评论

相关推荐

    WebSQL例子、webSQL 增删改查

    WebSQL是一种在浏览器环境中存储和查询结构化数据的API,主要应用于离线Web应用程序。它提供了类似于关系数据库管理系统(RDBMS)的功能,允许开发者在客户端进行数据的增删改查操作,无需服务器端交互。虽然现在Web...

    html5 Web SQL Database 之事务处理函数transaction与executeSQL解析

    通过一个例子说明 Web SQL Database 的基本用法。它首先调用 openDatabase 创建了名为“fooDB”的数据库。然后使用 transaction 执行两条 SQL 语句。第一条 SQL 语句创建了名为“foo”的表,第二条 SQL 语句向表中...

    HTML5 WEB SQL 概念和基本操作

    HTML5的Web SQL是一种在浏览器本地存储数据的技术,尽管它并未被纳入HTML5规范,但仍然在某些浏览器中得到支持,比如Chrome、Safari和Opera。Web SQL提供了一个API,使得开发者可以使用SQL来操作客户端数据库,这...

    Web Database Applications with PHP & MySQL, 2nd Edition (例子与代码)

    《Web Database Applications with PHP & MySQL, 2nd Edition》是一本深入探讨如何使用PHP和MySQL构建Web数据库应用程序的专业书籍。本书旨在帮助读者掌握利用这两种强大技术进行动态网站开发的关键技能。 PHP是一...

    JSP+sql server论坛例子

    综上所述,"JSP+sql server论坛例子"是一个综合性的项目,涵盖了Web开发中的前端展示、后端数据处理和交互,以及数据库设计等多个方面,对于学习和理解JSP与SQL Server的集成应用具有很好的实践价值。通过深入分析和...

    Java Web数据库系统应用开发与实例源代码

    Java Web数据库系统应用开发是构建基于互联网的交互式应用程序的关键技术,主要涉及到Web服务器、数据库服务器和编程语言的集成。本资源"Java Web数据库系统应用开发与实例源代码"提供了实际操作中的源代码,帮助...

    经典 java web例子

    在实际项目中,Java Web应用程序常常与数据库交互,例如使用JDBC(Java Database Connectivity)连接到MySQL或Oracle数据库。homework02可能会有数据访问对象(DAO)类,如`UserDAO.java`,用于执行SQL查询,管理和...

    java web 小例子

    5. **Tomcat服务器**:作为Java Web应用的容器,Tomcat会解析并运行Servlet和JSP。你可能需要在本地安装Tomcat,然后部署这个小例子。 6. **Eclipse或IntelliJ IDEA**:这些是常用的Java开发集成环境,可以方便地...

    web简单例子student

    5. 其他支持文件:如WEB-INF目录下的web.xml,是Web应用的部署描述符,配置了Servlet的映射和其他设置。 理解并掌握Servlet、JSP和JDBC是Web开发的基础,这个"student"项目为初学者提供了一个实践这些技术的绝佳...

    html连接access数据库的小例子

    然而,需要注意的是,由于JavaScript代码运行在客户端,直接暴露SQL查询可能带来安全风险,因此在实际应用中,应确保对用户输入进行验证和过滤,避免SQL注入攻击。同时,考虑使用更安全的数据库连接方式,如ODBC连接...

    jsp和sqlserver开发信息管理小例子

    【标题】"jsp和sqlserver开发信息管理小例子"是一个基于Java Server Pages(JSP)技术和Microsoft SQL Server数据库的信息管理系统示例项目。这个项目旨在帮助初学者理解和掌握如何使用JSP进行后端处理,以及如何与...

    txtSQL数据库应用例子

    注意,为了防止SQL注入攻击,实际应用中应使用预处理语句或参数化查询,但txtSQL由于其简单性,不存在这个问题。 然而,这个例子没有涉及数据验证和安全性措施,如检查用户名是否已存在或密码是否符合复杂性要求。...

    web service 完整例子(绝对好)

    Web服务是一种基于互联网的软件应用程序接口(API)交互方式,允许不同系统之间的数据交换和功能共享。...通过深入研究和实践这个例子,开发者可以更好地掌握Web服务技术,并将其应用于实际项目中。

    golang开发web应用示例(v0.03)

    在本示例中,我们将深入探讨如何使用Go语言(Golang)开发Web应用程序。Go语言是一种由Google设计的开源编程语言,以其简洁、高效的语法和内置并发支持而受到广大开发者喜爱。尤其在构建Web服务方面,Go语言表现出了...

    jsp连接sql2000添加删除分页例子

    在这个“jsp连接sql2000添加删除分页例子”中,我们将探讨如何使用JSP与Microsoft SQL Server 2000数据库进行交互,实现数据的添加、删除功能,并结合分页技术来提高用户体验。 首先,连接JSP与SQL Server 2000需要...

    使用Python防止SQL注入攻击的实现示例

    开放式Web应用程序安全项目(OWASP)每几年都会发布一次关于Web应用程序最常见安全风险的报告,其中SQL注入攻击一直位居前列。SQL注入不仅常见,而且危害巨大,能够导致数据泄露、破坏或被篡改等严重后果。鉴于...

    HTML5中的本地数据应用

    HTML5中的本地数据应用是现代Web开发中的一个重要领域,它使得网页应用能够在离线状态下仍然保持功能,极大地提升了用户体验。随着互联网技术的发展,越来越多的服务正在从本地迁移到云端,但如何确保在网络不稳定或...

    web service 小例子asp.net带access数据库

    5. 测试Web服务:可以通过Visual Studio的内置Web服务器或者发布到IIS进行本地测试。使用浏览器访问`.asmx`文件加上方法名,例如`http://localhost/MyWebService.asmx/GetDatabaseData`,然后传递参数进行调用。 6....

    jsp连接SQL Server2005一个简单的例子附带驱动程序

    总之,通过JSP与SQL Server 2005的连接,你可以构建出动态的Web应用程序,处理用户请求并与数据库交互,从而实现各种功能。不过,随着技术的发展,现代Web开发更倾向于使用框架,如Spring Boot,它提供了更高级的...

Global site tag (gtag.js) - Google Analytics