保存或选择时出现 HTML5 数据库问题

Question

花了几个小时，但找不到代码有什么问题。

如果没有退出，代码只是创建一个表格，并添加在文本框中键入的文本。每次加载时，它都会加载这些内容并写入列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var mydb = null;

        function initDatabase() {
            try {
                if (!window.openDatabase) {
                    alert('Databases are not supported in this browser.');
                } else {
                    var shortName = 'mydb';
                    var version = '1.0';
                    var displayName = 'sample db';
                    var maxSize = 1024*1024*2;
                    mydb = openDatabase(shortName, version, displayName, maxSize, null);

                    mydb.transaction(
                        function (transaction) {
                            transaction.executeSql('CREATE TABLE IF NOT EXISTS sampletable(term TEXT NOT NULL);', [], nullDataHandler, errorHandler);
                        }
                    );

                    loadDB();
                }
            } catch(e) {
                if (e == 2) {
                    alert("Invalid database version.");
                } else {
                    alert("Unknown error "+e+".");
                }
                return;
            }
        }

        function loadDB() {
            $(".debugger").html("");

            mydb.transaction(
                function (t) {
                    t.executeSql("SELECT * FROM sampletable", [],dataSelectHandler,errorHandler);
                }
            );
        }

        function saveDB(_term) {
            mydb.transaction(
                function (transaction) {
                    transaction.executeSql("INSERT INTO sampletable(_term) VALUES (\""+_term + "\");");
                }
            );
        }

        function dataSelectHandler(transaction, results){
            $(".debugger").append("<li>Length: " + results.rows.length + "</li>");

            for (var i=0; i<results.rows.length; i++)
            {
                var row = results.rows.item(i);         
                addToHistoryUI(row['_term']);
            }
        }

        function errorHandler(transaction, error){
            if (error.code==1){
                alert("DB Table already exists");
            } else {
                // Error is a human-readable string.
                alert('Oops.  Error was '+error.message+' (Code '+error.code+')');
            }
            return false;
        }


        function nullDataHandler(){
            //alert("SQL Query Succeeded");
        }

        function addToHistoryUI(_term)
        {
            var newH = "<li>" + _term + "</li>";
            $(".addedQueries").append(newH);
        }

        $(function () {
            initDatabase();
        });

        $(document).ready(function () {
            $(".addBtn").click(function () {      
                var _term = $("#query").val();

                addToHistoryUI(_term);                  
                saveDB(_term);

                loadDB();
            });
        });
</script>
</head>
<body>
    <div data-role="page" id="index">
        <div class="panel">
                <input id="query" type="text" name="query" />
                <a class="navigationLink addBtn" href="#">add</a>
            </div>
            <div class="content">
                <ul class="addedQueries">
                </ul>
            </div>

            <ul class="debugger"></ul>
        </div>
</body>
</html>

Answer 1

在您的 saveDB() 方法中，您似乎试图在 WHERE 子句中使用双引号。我说的对吗？

双引号不能在 SQL 中使用。

我不确定为什么您的 SELECT 不起作用。请张贴错误信息。

更新：您的 INSERT 也失败了，因为您有错字。

transaction.executeSql("INSERT INTO sampletable(_term) VALUES (\""+_term + "\");");

您有 INTO sampleTable(_term)，但没有名为 _term 的列，列名是 term（没有下划线）。我做了那个改变，现在插入发生了。

你还有一些其他的小东西。这似乎做你想做的事。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var mydb = null;

        function initDatabase() {
            try {
                if (!window.openDatabase) {
                    alert('Databases are not supported in this browser.');
                } else {
                    var shortName = 'mydb';
                    var version = '1.0';
                    var displayName = 'sample db';
                    var maxSize = 1024*1024*2;
                    mydb = openDatabase(shortName, version, displayName, maxSize, null);

                    mydb.transaction(
                        function (t) {
                            t.executeSql('CREATE TABLE IF NOT EXISTS sampletable(term TEXT NOT NULL);', [], nullDataHandler, errorHandler);
                        }
                    );

                    loadDB();
                }
            } catch(e) {
                if (e == 2) {
                    alert("Invalid database version.");
                } else {
                    alert("Unknown error "+e+".");
                }
                return;
            }
        }

        function loadDB() {
            $(".debugger").html("");
            $("li").remove();

            mydb.readTransaction(
                function (t) {
                    t.executeSql("SELECT term FROM sampletable", [],dataSelectHandler,errorHandler);
                }
            );
        }

        function saveDB(_term) {
            mydb.transaction(
                function (transaction) {
                    transaction.executeSql("INSERT INTO sampletable(term) VALUES ('"+_term + "');");
                }
            );
        }

        function dataSelectHandler(t, results){

            $(".debugger").append("<li>Length: " + results.rows.length + "</li>");

            for (var i=0; i<results.rows.length; i++)
            {   
                var row = results.rows.item(i);         
                addToHistoryUI(row['term']);     

            }
        }

        function errorHandler(transaction, error){
            if (error.code==1){
                alert("DB Table already exists");
            } else {
                // Error is a human-readable string.
                alert('Oops.  Error was '+error.message+' (Code '+error.code+')');
            }
            return false;
        }


        function nullDataHandler(){
            //alert("SQL Query Succeeded");
        }

        function addToHistoryUI(_term)
        {
            var newH = "<li>" + _term + "</li>";
            $(".addedQueries").append(newH);
        }

        $(function () {
            initDatabase();
        });

        $(document).ready(function () {
            $(".addBtn").click(function () {      
                var _term = $("#query").val();

                addToHistoryUI(_term);                  
                saveDB(_term);

                loadDB();
            });
        });
</script>
</head>
<body>
    <div data-role="page" id="index">
        <div class="panel">
                <input id="query" type="text" name="query" />
                <a class="navigationLink addBtn" href="#">add</a>
            </div>
            <div class="content">
                <ul class="addedQueries">
                </ul>
            </div>

            <ul class="debugger"></ul>
        </div>
</body>
</html>