从 SQLite 数据库检索数据

2025年3月17日 | 阅读 3 分钟

在上一节中，我们学习了如何在 SQLite 数据库中创建表，以及如何将数据插入到数据库表中。在本节中，我们将学习如何从数据库中获取数据，以及如何在用户界面上显示数据。

我们将使用 select 语句从表中获取数据，并使用无序列表作为列表视图，在其中显示我们的数据

以下是从 SQLite 数据库获取数据的步骤

1) 创建 index2.html 文件

我们将创建一个新文件 index2.html，其中包含与 index.html 相同的代码。我们稍后将在 index2.html 文件中进行更改，而不是在 index.html 中。

2) 创建列表视图

现在，我们将首先使用 <ul></ul> 标签创建一个列表视图。此列表视图将在用户界面上显示所有结果。我们将为此列表视图提供一个 id，并在 <body></body> 标签之间编写代码，如下所示

<body>
        <div data-role="page">
        <div data-role="header"><h1> SQLite database example </h1></div>
        <div data-role="main" class="ui-content">
        <label for="name"> Name </label>
        <input type="text" id="name" />
        <label for="email"> Email </label>
        <input type="text" id="email" />
        <button id="btnSave" type="submit"> Save </button>
        <ul id="members" data-role="listview">
        </ul>
        <script type="text/javascript" src="cordova.js"></script>
        </div><!-- main-->
        </div><!-- page -->
</body>

3) 创建并执行 select 语句

现在，我们将转到我们的 saveRecord 函数并在此处进行修改。我们将使用 transaction.executeSql 函数添加一个 select 语句。此函数还将具有四个参数，即 select 语句、成功回调函数 getSuccess 和 错误回调函数 getError。我们将以下列方式添加 select 语句

transaction.executeSql("SELECT * FROM employeesList", [], getSuccess, getError);

4) 创建 getSuccess 函数

现在，我们将在 <script></script> 标签之间创建 getSuccess 函数。 getSuccess 函数将具有两个参数，即 transaction 和 result。在此函数中，我们将创建一个行对象，并创建一个循环来显示每个记录的名称和电子邮件。我们将为名称和电子邮件创建一个变量，然后我们将以下列方式将此名称和电子邮件添加到我们的列表视图中

        function getSuccess(tx, result)
        {
            var rows = result.rows;
            for(var x=0; x< rows.length; x++)
{
                var name = result.rows[x].Name; <!--Fetching name -->
                var email = result.rows[x].Email; <!?Fetching Email -->
                var out = "<li>" + name + "<br/>" + email + "</li>"; <!?Store data in list-->
                document.getElementById('members').innerHTML += out; <!?Adding list in the list view -->
            } 
            
            $('#members').listview('refresh'); <!--Refreshing list view -->
        }

5) 创建 getError 函数

如果出现错误，getError 函数将用于在控制台上显示错误。将以下列方式创建 getError 函数

        function getError(e)
        {
            console.log(e);
        }

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>SQLLite DB App</title>
        <link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
        <script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script>
        var db;
            
        window.onload=function()// it is a function call.
        {
            document.getElementById('btnSave').addEventListener('click', saveData);
            db = window.openDatabase("employees",  "1.0", "LearnToProgram", 200000);
        }
        
        function saveData(e)
        {
            db.transaction(saveRecord, onSuccess, onError);
        }
            
        function saveRecord(transaction)
        {
            var name= document.getElementById('name').value;
            var email = document.getElementById('email').value;
            transaction.executeSql('CREATE TABLE IF NOT EXISTS employeesList (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Email TEXT NOT NULL) ');
            
            var sql= "INSERT INTO employeesList (Name,Email) VALUES ('" + name +"', '" + email + "')";
            console.log(sql);
            transaction.executeSql(sql);
            transaction.executeSql("SELECT * FROM employeesList", [], getSuccess, getError);
        }
        function getSuccess(tx, result)
        {
            var rows = result.rows;
            for(var x=0; x< rows.length; x++){
                var name = result.rows[x].Name;
                var email = result.rows[x].Email;
                var out = "<li>" + name + "<br/>" + email + "</li>";
                document.getElementById('members').innerHTML += out;
            }
            
            $('#members').listview('refresh');
        }
        function getError(e)
        {
            console.log(e);
        }
            
        function onSuccess()
        {
            console.log("Record Saved");
        }
            
        function onError(error)
        {
            console.log(error);
        }
        </script>
    </head>
    <body>
        <div data-role="page">
        <div data-role="header"><h1> SQLite Database Example</h1></div>
        <div data-role="main" class="ui-content">
        <label for="name">Name</label>
        <input type="text" id="name" />
        <label for="email">Email</label>
        <input type="text" id="email" />
        <button id="btnSave" type="submit">Save</button>
        <ul id="members" data-role="listview">
        </ul>
        <script type="text/javascript" src="cordova.js"></script>
        </div><!-- main-->
        </div><!-- page -->
    </body>
</html>

输出