2

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

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

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

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

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

我在下面提供了发送 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;

}
4

1 回答 1

1

您有多行但只分配一个唯一 ID 来绑定？考虑使用类而不是 ID。ID 应该是唯一的（整个页面上只有一个“删除”，而不是每行一个）。

由于 ID 不是唯一的，您的出价可能会变得混乱并触发两次。

另外，我得出这个结论是因为您的绑定是$('#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);
    });
  }
});
于 2013-07-26T13:29:38.547 回答