Question

我正在从我的网站向我的RESTful Web服务（Asp.NET MVC 4 Web-Api ApiController）发送ajax HTML DELETE请求，以从我的HTML表中删除所选数据。我用jquery获取所选行。

当我按下发送删除ajax请求的删除按钮时，一切正常。但是，问题是在我发送第一个请求后，如果我第二次单击删除按钮，有趣的是控制器收到两个请求。让我用一个例子来解释这个问题：

假设我有两个Person类型的行数据，它有Id，Name，Surname：

约翰布朗1 2 Matthew Jonhson

假设我选择了表格的第一行，然后点击删除按钮。我的Api Controller按预期接收请求并从数据库中删除数据。现在一切都还好。但是，在删除第一行后，当我选择第二行并按下删除按钮时，我的控制器会收到第一行和第二行的删除请求。更有趣的是，当我第三次单击删除按钮时，控制器会收到三个请求，这会继续...

我提供了下面发送ajax请求的代码：

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

我无法解决问题。任何建议将不胜感激。

我从get api控制器返回我的数据json类型，我在脚本中创建了我的表行，并且表行没有id。在表上点击一个接收行索引，根据索引我取行数据（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应该是唯一的（整个页面上只有一个“删除”，而不是每行一个）。

由于这些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);
    });
  }
});

发送一个AJAX请求，但在控制器端接收多个请求

1 个答案: