發送一個AJAX請求，但在控制器端收到多個請求

Question

我從我的網站向我的REST風格的Web服務（Asp.NET MVC 4 Web-Api ApiController）發送ajax HTML DELETE請求，以從我的HTML表格。我用jquery獲得選定的行。

當我按我刪除按鈕，發送刪除ajax請求一切正常。但是，問題出在我發送第一個請求之後，如果我第二次點擊刪除按鈕，有趣的是控制器會收到兩個請求。讓我用一個例子說明這個問題：

假設我有擁有ID，名稱，姓類型的人兩個數據：

約翰·布朗
2馬修Jonhson

假設我選擇表格的第一行並單擊刪除按鈕。我的Api控制器按預期收到請求並刪除數據庫中的數據。一切都很好，直到現在。但是，刪除第一行後，當我選擇第二行並按下刪除按鈕時，我的控制器會收到第一行和第二行的刪除請求。更有趣的是，當我點擊刪除按鈕第三次，控制器接收三個請求和這樣下去...

我提供了以下發送Ajax請求的代碼：

$("#delete").click(function() { 
    $.ajax({ 
     url: "api/Person/Delete?id=" + id, 
     type: "DELETE" 
    }).success(function (data) { create(data); }); 
}); 

我做不到解決問題。任何建議將不勝感激。

我返回我的數據json類型從得到的api控制器和我創建我的錶行與循環在腳本和錶行沒有id.After表後按接收行索引，根據索引我拿行數據（ID姓氏）​​和我發送刪除請求與此參數。但我點擊第二次，首先api控制器接收第一行數據後收到第二行數據，我如何解決這個問題，請給你的意見感謝您的興趣：D

數據即將獲取api控制器（json類型）。

function create(data) { 

     var num_cols = 3 
     var theader = '<table id="datatable" border="1">\n'; 
     var tbody = '<tbody>'; 

     tbody += '<tr id="firstrow">'; 
     tbody += '<th> ID </th>'; 
     tbody += '<th> Name </th>'; 
     tbody += '<th> Surname </th></tr>'; 

     for (var i = 0; i < data.length; i++) { 

      tbody += '<tr id="tr">'; 

      tbody += '<td>' + '<span contenteditable=\"true\">' + data[i].Id +  '<\/span' + '</td>'; 
      tbody += '<td>' + '<span contenteditable=\"true\">' + data[i].Name + '<\/span' + '</td>'; 
      tbody += '<td>' + '<span contenteditable=\"true\">' + data[i].Surname + '<\/span' + '</td>'; 

      tbody += '</tr>\n'; 

     } 
     tbody += '</tbody>'; 
     var tfooter = '</table>'; 
     document.getElementById('tablodiv').innerHTML = theader + tbody + tfooter; 

} 

Answer 1

你有多行但只分配一個唯一的ID綁定？查看使用類而不是ID。 ID應該是唯一的（整個頁面只有一個「刪除」，而不是每行一個）。

由於身份證不是唯一的，你有可能會感到困惑併發射兩次機會。

另外，我得出這個結論是因爲你的綁定是$('#delete').click(...)而你只在你的AJAX調用中引用id而不是迭代ids的集合。否則，一個複選框 - 每行將有一些形式的迭代器和多個AJAX調用（或者至少捆綁DELETE請求，因此它發送多個ID）。

說了這麼多，你可以試試（原諒的元素結構我的創作自由，我是如何存儲的ID）：

<div class="people"> 
    <div class="person" data-id="1"> 
    John Brown 
    <span class="delete"></span> 
    </div> 
    <div class="person" data-id="2"> 
    Matthew Johnson 
    <span class="delete"></span> 
    </div> 
</div> 

那麼你的JS可能看起來像：

$('.person .delete').click(function(){ 
    var id = new Number($(this).closest('.person').data('id')); 
    if (!isNaN(id)){ 
    $.ajax({ 
     type: 'DELETE', 
     url: 'api/Person/Delete?id=' + $(this).closest('.person').data('id') 
    }).success(function(data){ 
     create(data); 
    }); 
    } 
});