使用AJAX来填充Cordova数据库 [英] Use AJAX to populate Cordova database
问题描述
遵循phonegap / cordova关于处理数据库的官方文档，我已经实现了代码，它对于单个表工作得很好，通过AJAX回调获得JSON数据类型。
我的问题是用几个表来实现这个方法。
这是我的两个表的代码示例，但它不工作：
index.html
< html>
< head>
< script src =js / updater.js>< / script>
< / head>
< body>
< input type =buttononclick =update（）value =Update DB！>< / input>
< / body>
< / html>
updater.js
var transactions = [];
var jqxhr = null;
function update（）
{
jqxhr = $ .ajax（http://www.example.com/file.php?id=100）
。done function（data）
{
data = JSON.parse（data）;
$ .each（data.elements，function（index，item）
{
.push（INSERT INTO elements VALUES（'+ item.id +'，'+ item.name +'，'+ item.tel +'，'+ item.mail +' ）;
}）;
}）
.fail（function（）{console.log（error）;}）
。 log（complete）;}）;
jqxhr = $ .ajax（http://www.example.com/file.php?id=200）
.done（function（data）
{
data = JSON.parse（data）;
$ .each（data.people，function（index，item）
{
transactions.push（INSERT INTO people VALUES（' .id +'，'+ item.name +'，'+ item.nick +'，'+ item.gender +'））;
}）;
}）
.fail（function（）{console.log（error）;}）
.always（function（）{console.log（complete）;}）;
var db = window.openDatabase（Database，1.0，Example，2097152）;
db.transaction（populateDB，errorCB，successCB）;
}
function populateDB（tx）
{
tx.executeSql（'DROP TABLE IF EXISTS elements'）;
tx.executeSql（'CREATE TABLE IF NOT EXISTS elements（id INTEGER NOT NULL PRIMARY KEY，name TEXT（32），tel TEXT（20），mail TEXT（64））'）;
tx.executeSql（'DROP TABLE IF EXISTS people'）;
tx.executeSql（'CREATE TABLE if NOT EXISTS people（id INTEGER NOT NULL PRIMARY KEY，name TEXT（32），nick TEXT（20），gender TEXT（10））'）;
for（var i = 0; i< transactions.length; i ++）
{
tx.executeSql（transactions [i]）;
}
}
function errorCB（err）
{
alert（Error processing SQL：+ err.code）;
}
function successCB（）
{
alert（Database updated！
}
能帮我吗？
谢谢！
默认情况下，所有$ .ajax请求都是异步发送的，所以我想问题是
transactions.push（INSERT INTO people ...
在写入数据库后调用。
您可以将第二个请求放在完成的第一个请求，并在第二个请求的完成函数结束时写入数据库。它看起来很丑陋，即使你拆分它在几个函数，但它应该工作。
使用$ .Deferred改进代码的外观：
http ：//api.jquery.com/category/deferred-object/
jQuery.ajaxasync（您可以将其设置为false）设置自JQuery 1.8以来已弃用，因此它不是一个好选项。 https://api.jquery.com/ jQuery.ajax /
UPDATE。第一个选项的代码（只有重要部分）：
函数update（）
{
jqxhr = $ .ajax（http://www.example.com/file.php?id=100）
.done（function（data）
{
data = JSON.parse（数据）;
var elementsCount = data.elements.length;
$ .each（data.elements，function（index，item）
{
transactions.push（INSERT INTO元素VALUES（'+ item.id +'，'+ item.name +'，'+ item.tel +'，'+ item.mail +'））;
if（index == elementsCount - 1）//确保所有元素都添加到数组
{
updateSecond（）;
}
}）;
} ;
}
function updateSecond（）
{
jqxhr = $ .ajax（http://www.example.com/file.php?id=200 ）
.done（function（data）
{
data = JSON.parse（data）;
var elementsCount = data.people.length;
$。每个（data.people，function（index，item）
{
transactions.push（INSERT INTO people VALUES（'+ item.id +'，'+ item.name + ，''+ item.nick +'，'+ item.gender +'））;
if（index == elementsCount - 1）//确保所有元素都添加到数组
{
dbWrite（）;
}
}）;
}）;
}
函数dbWrite（）
{
var db = window.openDatabase（Database，1.0，Example，2097152）;
db.transaction（populateDB，errorCB，successCB）;
}
代码绝对不像理想，但它应该能正常工作。 / p>
following the official documentation of phonegap / cordova on handling databases, I have implemented the code and it worked well for me for a single table, getting JSON data types with AJAX callback.
My problem is to implement this method with several tables.
Here's an example of my code for two tables, but it doesn't work:
index.html
<html>
<head>
<script src="js/updater.js"></script>
</head>
<body>
<input type="button" onclick="update()" value="Update DB!"></input>
</body>
</html>
updater.js
var transactions=[];
var jqxhr=null;
function update()
{
jqxhr = $.ajax( "http://www.example.com/file.php?id=100" )
.done(function(data)
{
data = JSON.parse(data);
$.each(data.elements,function(index, item)
{
transactions.push("INSERT INTO elements VALUES('"+ item.id + "','"+ item.name + "','"+ item.tel + "','"+ item.mail +"')");
});
})
.fail(function() { console.log("error"); })
.always(function() { console.log("complete"); });
jqxhr = $.ajax( "http://www.example.com/file.php?id=200" )
.done(function(data)
{
data = JSON.parse(data);
$.each(data.people,function(index, item)
{
transactions.push("INSERT INTO people VALUES('"+ item.id + "','"+ item.name + "','"+ item.nick + "','"+ item.gender +"')");
});
})
.fail(function() { console.log("error"); })
.always(function() { console.log("complete"); });
var db = window.openDatabase("Database", "1.0", "Example", 2097152);
db.transaction(populateDB, errorCB, successCB);
}
function populateDB(tx)
{
tx.executeSql('DROP TABLE IF EXISTS elements');
tx.executeSql('CREATE TABLE IF NOT EXISTS elements (id INTEGER NOT NULL PRIMARY KEY, name TEXT(32), tel TEXT(20), mail TEXT(64))');
tx.executeSql('DROP TABLE IF EXISTS people');
tx.executeSql('CREATE TABLE IF NOT EXISTS people (id INTEGER NOT NULL PRIMARY KEY, name TEXT(32), nick TEXT(20), gender TEXT(10))');
for (var i=0;i<transactions.length;i++)
{
tx.executeSql(transactions[i]);
}
}
function errorCB(err)
{
alert("Error processing SQL: "+err.code);
}
function successCB()
{
alert("Database updated!");
}
Could you help me, please? Thanks!
By default, all $.ajax requests are sent asynchronously, so i suppose the problem is that
transactions.push("INSERT INTO people...
invokes after writing to database is done.
You can put second request at the end of "done" function of first request, and writing to database at the end of "done" function of second request. It looks quite ugly, even if you split it in several functions, but it should work.
Using of $.Deferred improve a little how code looks like: http://api.jquery.com/category/deferred-object/
jQuery.ajax "async" (which you can set to "false") setting is deprecated since JQuery 1.8, so it's not a good option. https://api.jquery.com/jQuery.ajax/
UPDATE. Code for the first option (only important part):
function update()
{
jqxhr = $.ajax( "http://www.example.com/file.php?id=100" )
.done(function(data)
{
data = JSON.parse(data);
var elementsCount = data.elements.length;
$.each(data.elements,function(index, item)
{
transactions.push("INSERT INTO elements VALUES('"+ item.id + "','"+ item.name + "','"+ item.tel + "','"+ item.mail +"')");
if (index == elementsCount - 1) //making sure all elements are added to array
{
updateSecond();
}
});
});
}
function updateSecond()
{
jqxhr = $.ajax( "http://www.example.com/file.php?id=200" )
.done(function(data)
{
data = JSON.parse(data);
var elementsCount = data.people.length;
$.each(data.people,function(index, item)
{
transactions.push("INSERT INTO people VALUES('"+ item.id + "','"+ item.name + "','"+ item.nick + "','"+ item.gender +"')");
if (index == elementsCount - 1) //making sure all elements are added to array
{
dbWrite();
}
});
});
}
function dbWrite()
{
var db = window.openDatabase("Database", "1.0", "Example", 2097152);
db.transaction(populateDB, errorCB, successCB);
}
Code definitely doesn't look like ideal, but it should work properly.
这篇关于使用AJAX来填充Cordova数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
