Question

在我的PhoneGap应用程序中，用户将数据键入表单字段，并将该数据输入localStorage，然后输入到webSQL DB中，如：

tx.executeSql('INSERT INTO DEMO (id, data1, data2, data3) VALUES (\"'
 + new_id + '\"' + ', \"' + formdata1Get + '\", \"' + formdata2Get + '\", \"' + formdata3Get + '\")');

这有效;我可以看到数据库填充了Chrome的开发工具。但是，如何显示整个数据库内容？以下内容不起作用：

tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id UNIQUE NOT NULL, data1 TEXT NULL, data2 TEXT NULL, data3 TEXT NULL)');
tx.executeSql('INSERT INTO DEMO (id, data1, data2, data3) VALUES (?, ?, ?, ?)', [id, data1, data2, data3]);

我得到的错误是“未捕获的ReferenceError：id未定义” 这就是以下内容：

[id, data1, data2, data3]);

参考：http://docs.phonegap.com/en/3.0.0/cordova_storage_storage.md.html

Answer 1

了解你提到的内容我提供了一个示例代码来演示这个。希望它符合你的要求。我使用了WebSql提供的rowid列作为唯一字段。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.0.0/jquery.serialize-object.compiled.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>
<body>
<form id="test_form" action="" method="post">
    Data 1: <input type="text" name="data1"><br>
    Data 2: <input type="text" name="data2"><br>
    Data 3: <input type="text" name="data3">
    <!--<button onclick="StoreData();">Store into localStorage</button>-->
    <input type="submit" id="submitButton" name="submitButton" value="Store into localStorage">
</form> 
<button onclick="showValues();">Show WebSql Values</button>
<div id="savedValues"/>
<script type="text/javascript" charset="utf-8">
    var jsonFormObject;
    var dbInstance;
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {      
        dbInstance = window.openDatabase("Database", "1.0", "Test DB", 200000);
        dbInstance.transaction(function(tx){tx.executeSql('DROP TABLE IF EXISTS FORMDATA');}); 
        dbInstance.transaction(function(tx){tx.executeSql('CREATE TABLE IF NOT EXISTS FORMDATA (data1 TEXT NULL, data2 TEXT NULL, data3 TEXT NULL)')});
    }
    function populateDB(tx) {           
        tx.executeSql('INSERT INTO FORMDATA (data1, data2, data3) VALUES (?, ?, ?)', [jsonFormObject.data1, jsonFormObject.data2, jsonFormObject.data3]); 
    }    
    function errorCB(err) {
        console.log(err.message);
    }
    function showValues() {
        dbInstance.transaction(function(tx){tx.executeSql('SELECT rowid,* FROM FORMDATA', [], querySuccess, errorCB)}, errorCB);
    }   
    function querySuccess(tx, results) {
        var len = results.rows.length;
        if(len) {
            var html = '<table border=1 width=500 cellpadding=5 cellspacing=0><tr><th>Id</th><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>';
            for (var i=0; i<len; i++){
                html  += '<tr><td>'+results.rows.item(i).rowid + '</td><td>'+results.rows.item(i).data1 + '</td><td>'+results.rows.item(i).data2 + '</td><td>'+results.rows.item(i).data3+'</tr>';            
            }       
            html+='</table>';
            $('#savedValues').html(html);
        }else{
            $('#savedValues').html('No Data found in Database');
        }
    }
    $("#test_form").submit(function(event) {     
          event.preventDefault();
          var formObject = $(this).serializeObject();
           console.log(formObject);       
          // Storing To local Storage
          localStorage.setItem('formObject', JSON.stringify(formObject));     
          // Reading From local Storage
          jsonFormObject = JSON.parse(localStorage.getItem('formObject'));
          console.log(jsonFormObject);
          //Insert into Websql Database
          dbInstance = window.openDatabase("Database", "1.0", "Test DB", 200000);
          dbInstance.transaction(populateDB, errorCB,function(){console.log('inserted successfully')});       
    });
</script>
</body>
</html>

对于用户输入的数据，tx.executeSql的语法不正确

1 个答案: