Ajax 成功时的 Phonegap WebSQL 事务不起作用

Phonegap WebSQL Transaction on Ajax Success not working

在我的应用程序主页上,通过 ajax 调用 php 加载城市列表,然后 json 返回应用程序。我 运行 这个已经用了很长时间了,没问题,但现在我想把返回的数据保存到数据库中。

我得到了下面的工作,在 chrome,safari 上工作。但是..当我用 phonegap build 打包并将它加载到我的 phone.. 它没有.

  window.addEventListener('load', function () {
    document.addEventListener("deviceready", onDeviceReady, false);
  }, false);

  dbName = "database5";
  var database = null;
  function onDeviceReady(){
      database = window.openDatabase(dbName,"1.0", "247 Chiropractor", 5 * 1024 * 1024);
      database.transaction(PopulateDatabase, errorOpenDB, successOpenDB);
  }

我已经尽我所能调试了这个,无论如何使用警报,看看代码在哪里失败。

它在我的 ajax for 循环中失败,我的 execute sql t运行saction 是失败的地方。 tx.executeSql

      function PopulateDatabase(tx){
          tx.executeSql('CREATE TABLE IF NOT EXISTS `appCities` (`ac_id` INTEGER PRIMARY KEY AUTOINCREMENT,`ac_city1` TEXT, `ac_city2` TEXT, `ac_city3` TEXT, `ac_city4` TEXT, `ac_city5` TEXT, `ac_dateadded` TEXT)', AjaxError, AjaxSuccess);

        function AjaxError(){
            alert("AjaxError!");
        }

        function AjaxSuccess(tx){
            $.ajax({
                url: preURL+"getCities.php",
                //async : false,
                success: function(data){
                        var date = new Date();
                        var date = +date;
                        var timestamp = new Date(date);
                        for(i = 0;i < data.length; i++){
                            tx.executeSql("INSERT OR REPLACE INTO appCities VALUES("+data[i].ac_id+",'"+data[i].city1+"','','','','','"+timestamp+"')");
                        }

                        afterAjax();
                },
                error: function(data) {
                    $('#msgToUser').html('<br><h2 align="center">. .oops!. .</h2><p style="padding:10px">There was an error. It is possible that you may not have signal. Please connect to wifi or make sure you have cellular signal and restart this application. If you believe you recieved this error by mistake, please contact us</p>');
                }
            });
        }
      }

我试过 async false,但这会导致我的 ajax 调用失败并触发错误函数。

在过去的 2 天里,我大概花了大约 10 个小时来努力使它正常工作,如果有任何帮助,我将不胜感激。

我在 iOS/Android 上的 Phonegap/Cordova 应用程序中使用 WebSQL。我通过回调使用操作链来执行顺序操作,这似乎在两个平台上都能正常工作。将这个原则应用到你的代码中,我会做这样的事情:

window.addEventListener('load', function () {
    document.addEventListener("deviceready", onDeviceReady, false);
}, false);

dbName = "database5";
var database = null;
var ajaxData = null;

function onDeviceReady(){
  database = window.openDatabase(dbName,"1.0", "247 Chiropractor", 5 * 1024 * 1024);
  doAjax();
}

function doAjax(){
    $.ajax({
         url: preURL+"getCities.php",
         //async : false,
         success: AjaxSuccess,
         error: function(data) {
             $('#msgToUser').html('<br><h2 align="center">. .oops!. .</h2><p style="padding:10px">There was an error. It is possible that you may not have signal. Please connect to wifi or make sure you have cellular signal and restart this application. If you believe you recieved this error by mistake, please contact us</p>');
         }
    });
}

function AjaxSuccess(data){
     ajaxData = data;
     database.transaction(CreateDatabase, errorOpenDB, successOpenDB);
}

function SqlError(){
     alert("SqlError!");
}

function CreateDatabase(tx){
     tx.executeSql('CREATE TABLE IF NOT EXISTS `appCities` (`ac_id` INTEGER PRIMARY KEY AUTOINCREMENT,`ac_city1` TEXT, `ac_city2` TEXT, `ac_city3` TEXT, `ac_city4` TEXT, `ac_city5` TEXT, `ac_dateadded` TEXT)', SqlError, CreateSuccess);
}

function CreateSuccess(tx){
     var date = new Date();
     var date = +date;
     var timestamp = new Date(date);
     doInserts(timestamp, tx);
}

function doInserts(timestamp, tx){
    if(ajaxData.length > 0{
        var data = ajaxData.shift();
        tx.executeSql("INSERT OR REPLACE INTO appCities VALUES("+data.ac_id+",'"+data.city1+"','','','','','"+timestamp+"')", SqlError, doInserts.bind(this, timestamp));

    }else{
        insertSuccess();
    }
}

function insertSuccess(){
    console.log("Insert successful");
    afterAjax();
}