拖放和AJAX保存後重復記錄

我正在努力解決我正在處理的Web應用程序的概念問題。該應用程序允許用戶拖拽&拖放DOM元素（如筆記，列表，圖片）。將元素從菜單拖動到某種紙張上。一旦你放下一個，應用程序會向服務器發出一個AJAX調用以保存該元素（位置，顏色等）。服務器回答一個id，然後將其保存到DOM元素作爲其id屬性。當您再次移動該元素時，會調用相同的AJAX調用，但使用其ID。拖放和AJAX保存後重復記錄

但問題是，如果我在放置區快速刪除一個新元素然後再次移動它，它會創建重複條目，因爲第一個AJAX調用還沒有完成，第二個調用沒有編號（因爲它必須來自服務器）。

下面的JavaScript代碼的簡化樣品保存元素：

function saveObject(object,action){ 

    var params = { 
     x : object.position().left, 
     y : object.position().top, 
     w : object.width(), 
     h : object.height(), 
    }; 

    if(object.attr("id")){ 
     params.id = object.attr("id"); 
    } 

    $.post("/save_object",params,function(data){ 
     if(data.success){ 
      object.attr("id",data.data); 
     } 
    }); 

}

服務器端，我只是檢查了一個ID，然後我要麼運行「創建」功能或「修改」功能用的ID。

這是非常具體的，我看了很多關於ajax重複的帖子，但設置一個標誌在這裏沒有幫助。我無法阻止AJAX請求被創建，因爲它不應該阻止任何UI元素，也不希望丟失任何保存事件。我有一些限制要堅持，因爲這個頁面是動態的，同一頁面上的用戶可以看到其他用戶的事件。

在這一點上我會很感激任何答案。

來源

2013-10-07 CinetiK

有幾種不同的方法可以解決這個問題，我會讓你選擇一個可能更適合你的應用程序。

選項一將通過將請求存儲到一個數組中來將請求排入服務器。那麼你會有一些邏輯會逐個發送請求。

選項二將通過使用GUID而不是自動遞增的ID將對象ID初始化移動到客戶端。然後，您可以將這些保存到服務器，而不必擔心重複或覆蓋。我還建議使用MVC來保持邏輯組織，例如backbone.js。

來源

2013-10-07 11:58:24 Ryan

選項2的問題在於該應用程序現在與整個基礎架構一起工作，因此無法以這種方式進行重構。選擇1可能會達成協議，但我可能會在應用程序中以這種方式失去響應能力和活力。當然，你們在這裏沒有看到任何東西，但我不能詳細說明它更多的不幸：（ – CinetiK

我認爲如果你只是重寫你的應用程序接受來自客戶端的ID而不是在服務器上創建一個ID，你應該好吧，我懷疑這會是一個巨大的變化，儘管我可能是錯的 – Ryan

問題是我們有移動應用程序的工作方式，我們不能改變，因爲它是數據庫變化以及服務器和應用程序 – CinetiK

，使這項工作無縫...

1.you則要阻止阻力，直到前面的請求已完成

2.abort如果更早請求拖放功能一個新的請求被提出。

你可以有一個排隊邏輯......你可以將所有請求存儲在一個數組中......一個xmlHTTP對象數組。然後，您可以選擇在隊列中發送ajax請求，或者一次發送一個請求，同時放棄所有其他請求。

來源

2013-10-07 11:49:57 Abhidev

你能對第二點更具體嗎？第一個絕對不是這裏的選擇。我明確無法阻止用實際的應用程序機制做出的請求。 – CinetiK

拖放和AJAX保存後重復記錄

回答

相關問題