为什么jQuery.sortable的这个ajax执行更新多次？

这是这个问题的延续：jQuery UI Sortable, then write order into a database 为什么jQuery.sortable的这个ajax执行更新多次？

的问题是以下几点：

我想使用jQuery UI的sortable功能允许用户设置的顺序，然后在变化，把它写到数据库并更新它。有人可以写一个关于如何完成这个任务的例子吗？

因为我需要能够快速重新排序的东西，我认为这将是非常有用的。尽管接受的解决方案存在一个大问题。我在这里引用答案：

下面是一个快速示例，一旦元素发生位置变化就将数据发送到指定的URL。
$('#element').sortable({ 
    axis: 'y', 
    update: function (event, ui) { 
     var data = $(this).sortable('serialize'); 

     // POST to server using $.post or $.ajax 
     $.ajax({ 
      data: data, 
      type: 'POST', 
      url: '/your/url/here' 
     }); 
    } 
}); 
这样做的是它使用元素id创建元素的数组。所以，我平时做这样的事情：
<ul id="sortable"> 
    <li id="item-1"></li> 
    <li id="item-2"></li> 
    ... 
</ul> 
当您使用序列化选项，它会创建一个POST查询字符串是这样的：项目[] = 1个&项目[] = 2等，所以，如果你做在id属性中使用 - 例如 - 数据库ID，则可以简单地遍历POSTed数组并相应地更新元素的位置。

例如，在PHP：
$i = 0; 

foreach ($_POST['item'] as $value) { 
    // Execute statement: 
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value 
    $i++; 
} 

这种解决方案的问题在于：它不只是每次移动的项目时间更新一次，但也样了“专卖店”的其他更新并在你所做的那个之前执行它们。所以，举例来说，如果你移动4个项目，它会更新1 + 2 + 3 + 4次，导致更多的错误，并且如果你需要管理很多项目，网页会慢很多。

我的问题很简单：为什么会发生这种情况？我怎样才能避免这种情况？

来源

2017-08-28 Shinra tensei

似乎有点不可避免的给你的例子。因为如果将第4个项目移动到第1个位置，脚本不仅需要更新移动项目的位置（顺序），而且还必须移除它之前的所有记录。如果这是不可接受的，那么您是否可以在每个元素重新定位之后关闭AJAX请求，而仅在用户按下提交后才发送表单数据？ –

嗯......你是对的，这似乎是一个很好的方式来处理这个问题。我会尝试的 –

答案确实很简单（谢谢Lucas Krupinski）。实际上，所有需要的是添加一个按钮或类似的东西，并使其处理更新。

让我们想象我已经添加了一个按钮onclick="save()"。如果我们把这样的代码：

$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 
}); 

function save(){ 
    var order = $("#sortable").sortable('serialize'); 
    console.log("order: " + order); 
    $.ajax({ 
     data: order, 
     type: 'POST', 
     url: '/your/url/here' 
    }); 
}

我们将看到脚本只与我们现在所拥有的顺序执行一次，避免订单的性能下降和错误。

来源

2017-08-28 12:08:56

为什么jQuery.sortable的这个ajax执行更新多次？

回答

相关问题