PhoneGap 检索数据
从 SQLite 数据库中检索数据
在上一节中，我们学习了如何在 SQLite 数据库中创建表以及如何将数据插入到数据库表中。在本节中，我们将了解如何从数据库中获取数据以及它如何在用户界面上可见。
我们将使用 select 语句从表中获取数据并使用无序列表作为我们的数据将被显示的列表视图:
这些是用于从 SQLite 数据库:
1) 创建 index2.html 文件
我们将创建一个新文件 index2.html使用与 index.html 中相同的代码。我们稍后将在 index2.html 文件中进行更改，而不是在 index.html 中。
2) 创建列表视图
现在，我们将首先使用 标签。此列表视图将在用户界面上显示所有结果。我们将在 之间为这个列表视图和代码提供一个 id标签为:
<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语句数组getSuccess回调函数和getError回调函数。我们将通过以下方式添加 select 语句:
transaction.executeSql("SELECT * FROM employeesList", [], getSuccess, getError);
4) 创建 getSuccess 函数
现在，我们将在 <script></script> 标签。 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="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/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>
输出:
