将 web sql 结果显示到 html<li>答案

【问题标题】：display web sql results to html<li>将 web sql 结果显示到 html<li>
【发布时间】：2011-05-24 09:24:29
【问题描述】：

我已经使用 sqlite 创建了一个 web sql 来使用 javascript 创建一个数据库，我希望将结果显示到列表项标记内的另一个 html 页面上。我怎样才能做到这一点？我正在开发移动应用程序时使用 jquery 和 phonegap。

    // Populate the database 
//
function populateDB(tx) {
    tx.executeSql('DROP TABLE IF EXISTS DEMO');
    tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}

// Query the database
//
function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

// Query the success callback
//
function querySuccess(tx, results) {
    var len = results.rows.length;
    console.log("DEMO table: " + len + " rows found.");
    for (var i=0; i<len; i++){
        console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " +      results.rows.item(i).data); 
//the data from here to the html page.
    }
}

// Transaction error callback
//
function errorCB(err) {
    console.log("Error processing SQL: "+err.code);
}

// Transaction success callback
//
function successCB() {
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(queryDB, errorCB);
}

html页面：

<div data-role="content" class="ui-content" role="main">
<div id="wrapper" >
    <div id="scroller" >
        <ul data-role="listview" data-theme="c" class="ui-btn-inset">

            <li>would like to put it inside here</li>
        </ul>
    </div>
</div>

是否可以包含链接？这还需要 Ajax 吗？

谢谢。

【问题讨论】：

数据库在客户端。文档在客户端上呈现。不需要与服务器通信，所以不需要 Ajax。
它是 sqlite。忽略它。对不起。
那么我怎样才能将数据库中的数据检索到下面的 html 中呢？
不能用MySQL和PHP来实现吗，这样会更方便。
你有什么教程可以介绍给我吗？但我仍然想知道是否有任何方法可以解决这个问题。不过还是谢谢。

标签： javascript html sql

【解决方案1】：

var ul = document.getElementById("scroller").getElementsByTagName("UL")[0];
for (var i=0; i<len; i++){
    var str = "Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " +      results.rows.item(i).data;
    str = str.replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/'/g, "&apos;").replace(/"/g, "&quot;"); // entity encode
    ul.innerHTML += "<li>" + str + "</li>";
}

这里有一个快速的解决方案。您只需将 LI 标记附加到 UL 的内部 HTML。

【讨论】：

【解决方案2】：

这是一个简化的例子：

//Replace the title with the first row
document.title = ("Row = " + 0 + " ID = " + results.rows.item(0).id + " Data =  " +      results.rows.item(0).data);

//Append the rest of the rows to the title
for (var i=1; i<len; i++)
  {
  document.title += ("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " +      results.rows.item(i).data); 
  }

//Copy the result to the specified element
document.querySelector("#scroller li").innerHTML("<pre>"+document.title+"</pre>");

【讨论】：