Ajax IndexedDB 删除当前成功上传答案

【问题标题】：Ajax IndexedDB Delete Current Sucesfull UploadAjax IndexedDB 删除当前成功上传
【发布时间】：2014-03-19 10:20:03
【问题描述】：

我昨天发布了类似的东西，但它有效但只删除了数据中的最后一个对象。

我想要发生的事情

这个 ajax 上传会处理大量数据，所以我使用 indexeddb。这也将在手机上使用。所以我希望它一次上传一个项目，如果一个项目未能从数据中删除以前的项目，那么他们就不需要再次上传所有内容。

我试过 async = false，这完全符合我的要求，但这个冷冻浏览器。

当前代码试图注释掉任何可能令人困惑的位，目前这只会删除完成后的最后一项。

function uploadData(e) {

 //Get Database 
 var transaction = db.transaction(["data"], "readonly");
 var objectStore = transaction.objectStore("data");
 var cursor = objectStore.openCursor();

 //Starts Looping
 cursor.onsuccess = function(e) {
     var res = e.target.result;
     if (res) {
         if (navigator.onLine) {
             $('.popup-heading').text('Uploading...');
             var passData = {
                 client_id: res.value.client_id,
                 parent_id: res.value.parent_id,
                 storename: res.value.storename,
                 image: res.value.image,
                 key: res.key,
             };
             var jsonData = JSON.stringify(passData);
             $.ajax({
                 url: "{{ path('destination_app_ajax') }}",
                 type: "post",
                 // Works but freezes browser 
                 /*async, flase*/
                 data: {
                     "json": passData
                 },
                 success: function(JsonData) {

                     //Delete item once successfull 
                     var t = db.transaction(["data"], "readwrite");
                     var request = t.objectStore("data").delete(passData.key);
                     t.oncomplete = function(event) {
                         console.log('item deleted');
                     };
                 },
                 error: function() {
                     $('.popup-heading').text('Upload Failed!');
                 }
             });
         } else {
             $('.popup-heading').text('Please find stronger signal or wifi connection');
         }
         res.
         continue ();
     }
 }

}

【问题讨论】：

这个 IDB 代码看起来通常是正确的。问题是它有效，但只是有时？你能再描述一下它什么时候起作用，什么时候不起作用？ jQuery 对象上的 async 属性与异步请求有关，而不是 IndexedDB。这可能是 ajax 问题而不是 IDB 问题吗？
它只删除了 ajax 中的一个对象，它循环了 10 个。它应该被删除，因为它们成功了。我的解决方案是将 res.key 传递给我的 php 脚本，然后将其回显以删除。
循环在哪里？听起来您在定义 passData 的任何地方都有范围问题，但我在上面包含的内容中看不到此代码。
cursor.onsuccess = function(e) { var res = e.target.result; if(res) {
嗯，我明白了。我会更新我的答案。

标签： javascript jquery ajax indexeddb

【解决方案1】：

听起来您的passData 存在范围问题。在循环内部，但在定义 var passData = ... 之前尝试使用匿名函数包装代码块：

(function() {
   /* Your code here */
}());

这应该可以防止passData 泄漏到全局范围内，这似乎就是为什么您的 IDB 代码只能在最后一个循环上工作的原因。（每次您的 AJAX 响应能够完成之前，passData 都会被重新定义。）

更新：没有循环，您正在处理回调。我看到发生的事情是，您在每个 Ajax 请求上重新定义您的 onsuccess 处理程序（并覆盖除最后一个以外的所有值），重用相同的事务。尝试将此事务代码移动到 AJAX 请求的成功回调中：

//Get Database 
 var transaction = db.transaction(["data"], "readonly");
 var objectStore = transaction.objectStore("data");
 var cursor = objectStore.openCursor();

这将创建一个闭包并在每个响应上提交您的delete 事务。这意味着每个 AJAX 请求一个事务，每个 AJAX 请求一个 onsuccess 回调（无需重新定义）。

【讨论】：

【解决方案2】：

我发现的唯一解决方案是通过 ajax 将密钥发送到 php，然后从中删除。

HTML

var passData = {     
                        .......
                        key: res.key,
                    };

.....

   $.ajax({
                       url: "yourscript.php",
                       type: "post",
                       data: {
                           "json": passData 
                       },

                       success: function(JsonData) {

                           jsonKey = JSON.parse(JsonData);


                           //Delete item once successfull 
                           var t = db.transaction(["data"], "readwrite");
                           var request = t.objectStore("data").delete(parseInt(jsonKey.key));
                           t.oncomplete = function(event) {
                            console.log('item deleted', jsonKey.key);
                           };



                       }

PHP

    $data = $_POST['json'];


    $returnKey =  json_encode(
                    array(
                            'key' => $data['key']
                    )
    );

【讨论】：