jquery - 发送一个AJAX请求，但在 Controller 端接收多个请求

Question

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

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

假设我有两行 Person 类型的数据，其中包含 Id、Name、Surname:

1 约翰·布朗
2 马修·约翰逊

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

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

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

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

我从 get api Controller 返回我的数据 json 类型，并在脚本中使用循环创建表行，并且表行没有 id。单击​​表后接收行索引，根据索引我获取行数据(id 名称)姓)，我用这个参数发送删除请求。但是我第二次点击，首先API Controller 在接收第二行数据之后接收第一行数据，我如何解决这个问题请给出您的意见，感谢您的兴趣:D

数据即将获取api Controller (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 来绑定(bind)？考虑使用类而不是 ID。 ID 应该是唯一的(整个页面上只有一个“删除”，而不是每行一个)。

您的出价很可能会变得困惑并触发两次，因为 ID 不唯一。

此外，我得出这个结论是因为您的绑定(bind)是 $('#delete').click(...) 并且您仅在中引用 id您的 AJAX 调用，而不是迭代 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);
    });
  }
});