拖放和AJAX保存后重复记录

Duplicate records after drag & drop and AJAX save

本文关键字：记录 保存 AJAX 拖放      更新时间：2023-09-26

我正在努力解决我正在处理的Web应用程序的概念问题。该应用程序允许用户拖放DOM元素(如笔记，列表，图像(。将元素从菜单拖动到某种纸张上。删除一个元素后，应用程序会向服务器进行 AJAX 调用以保存该元素(位置、颜色等...服务器使用一个 id 进行应答，然后将其作为其 id 属性保存到 DOM 元素中。再次移动该元素时，将进行相同的 AJAX 调用，但具有其 id。

但问题是，如果我快速将一个新元素放在拖放区然后再次移动它，它会创建重复的条目，因为第一个 AJAX 调用尚未完成，第二个调用是在没有 id 的情况下进行的(因为它必须来自服务器(。

以下是保存元素的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 元素，并且我不想丢失任何保存事件。我有一些限制要坚持，因为这个页面是动态的，同一页面上的用户可以看到彼此用户的事件。

在这一点上，我将不胜感激任何答案。

有

几种不同的方法可以解决这个问题，我会让你选择一种可能更适合你的应用程序。

选项之一是通过将请求存储在数组中来对服务器的请求进行排队。 然后，您将拥有一些逻辑来逐个发送请求。

选项 2 是使用 GUID 而不是自动递增 ID 将对象 ID 初始移动到客户端。然后，您可以将这些保存到服务器，而不必担心重复或覆盖。例如.js我还建议使用 MVC 来保持逻辑井井有条骨干。

使

这项工作无缝...

1.您必须阻止拖放功能，直到先前的请求完成

或

2.如果发出新请求，则中止先前的请求。

你可以有一个排队逻辑...您可以将所有请求存储在一个数组中...一个 xmlHTTP 对象的数组。然后，您可以选择在队列中发送 ajax 请求，或者一次只发送一个请求并同时丢弃所有其他请求。

相关文章：