Question

我正在努力解决我正在处理的网络应用上的概念性问题。该应用程序允许用户拖放删除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元素，我不想丢失任何保存事件。我有一些限制要坚持，因为这个页面是动态的，同一页面上的用户可以看到彼此用户的事件。

我会感激任何答案。

Answer 1

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

选项一是通过将请求存储在数组中来将请求排入服务器。然后你会有一些逻辑可以逐个发送请求。

选项二是通过使用GUID而不是自动递增ID来将对象id初始化移动到客户端。然后，您可以将这些保存到服务器，而无需担心重复或覆盖。我还建议使用MVC来保持逻辑组织，例如backbone.js。

Answer 2

让这个无缝地工作......

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

OR

2.如果发出新请求，请先处理先前的请求。

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

拖拽后的重复记录drop和AJAX保存

2 个答案: