Javascript HTML5数据库在保存或选择时出现问题_Javascript_Database_Html_Web Sql

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

javascript database html

Javascript HTML5数据库在保存或选择时出现问题,javascript,database,html,web-sql,Javascript,Database,Html,Web Sql,花了几个小时，但找不到代码的问题所在如果不存在，代码只创建一个表，并添加在文本框中键入的文本。每次加载时，它都会加载这些文件并写入列表 <!DOCTYPE html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>

花了几个小时，但找不到代码的问题所在

如果不存在，代码只创建一个表，并添加在文本框中键入的文本。每次加载时，它都会加载这些文件并写入列表

<!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>


var mydb=null；
函数initDatabase（）{
试一试{
如果（！window.openDatabase）{
警报（'此浏览器不支持数据库'）；
}否则{
var shortName='mydb'；
变量版本='1.0'；
var displayName='sample db'；
var maxSize=1024*1024*2；
mydb=openDatabase（shortName、version、displayName、maxSize、null）；
mydb.transaction(
职能（事务）{
executeSql（'CREATE TABLE IF NOT EXISTS sampletable（term TEXT NOT NULL）；'，[]，nullDataHandler，errorHandler）；
}
);
loadDB（）；
}
}捕获（e）{
如果（e==2）{
警报（“无效的数据库版本”）；
}否则{
警报（“未知错误”+e+”）；
}
回来
}
}
函数loadDB（）{
$（“.debugger”）.html（“”）；
mydb.transaction(
功能（t）{
t、 executeSql（“从sampletable中选择*，[]，dataSelectHandler，errorHandler）；
}
);
}
函数saveDB（_term）{
mydb.transaction(
职能（事务）{
executeSql（“插入到样本表（\u术语）值（\”“+\u术语+”\”）；”；
}
);
}
函数dataSelectHandler（事务、结果）{
$（“.debugger”）.append（长度：“+results.rows.Length+””；
对于saveDB（）方法中的（var i=0；i，您似乎试图在WHERE子句中使用双引号。我说得对吗
双引号在SQL中不起作用
我不确定您的选择为什么不起作用。请发布错误消息
更新：你的插入也失败了，因为你有一个输入错误
transaction.executeSql("INSERT INTO sampletable(_term) VALUES (\""+_term + "\");");

您已经进入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>


var mydb=null；
函数initDatabase（）{
试一试{
如果（！window.openDatabase）{
警报（'此浏览器不支持数据库'）；
}否则{
var shortName='mydb'；
变量版本='1.0'；
var displayName='sample db'；
var maxSize=1024*1024*2；
mydb=openDatabase（shortName、version、displayName、maxSize、null）；
mydb.transaction(
功能（t）{
t、 executeSql（'CREATE TABLE IF NOT EXISTS sampletable（term TEXT NOT NULL）；'，[]，nullDataHandler，errorHandler）；
}
);
loadDB（）；
}
}捕获（e）{
如果（e==2）{
警报（“无效的数据库版本”）；
}否则{
警报（“未知错误”+e+”）；
}
回来
}
}
函数loadDB（）{
$（“.debugger”）.html（“”）；
$（“li”）.remove（）；
mydb.readTransaction(
功能（t）{
t、 executeSql（“从sampletable中选择术语”，[]，dataSelectHandler，errorHandler）；
}
);
}
函数saveDB（_term）{
mydb.transaction(
职能（事务）{
executeSql（“插入到样本表（术语）值（“+”术语+“；”）；
}
);
}
函数dataSelectHandler（t，results）{
$（“.debugger”）.append（长度：“+results.rows.Length+””；
对于（var i=0；i将其更改为transaction.executeSql（“插入到样本表（“+”术语+“）”）”）；但没有再次工作，而且不幸的是，它不会给我一个错误。在您告诉我们您得到的错误消息之前，我已经完成了帮助。那么为什么这个问题的标题是“HTML5数据库在保存或选择时出错”？预期的结果是什么，实际发生了什么？没有这些信息很难提供帮助。如果还提供IndexedDB，因为它不会像WebSQL那样被淘汰。IndexedDB支持有任何东西吗？我听说没有。有供应商前缀的实现，但没有可靠的实现。你必须使用Web工具包bro不管怎样，我想还是要使用WebSQL。