在 DataTable Delete 操作中多次发送 Ajax 请求 - ASP.NET、JQuery、Ajax

Posted 2023-04-13

【中文标题】在 DataTable Delete 操作中多次发送 Ajax 请求 - ASP.NET、JQuery、Ajax

【英文标题】：Ajax Request is sent more than once in a DataTable Delete action - ASP.NET, JQuery, Ajax

【发布时间】：2019-11-01 13:50:50

【问题描述】：

每次调用函数时，AJAX 发送多个请求（ASP.NET MVC、Ajax 和 JQuery）

我有一个网页，其中包含一个表格（使用 JQuery 数据表），表格中的每一行都有一个删除按钮，其中包含每一行的 id。 Id 用于向 Web API（在同一项目中）发送删除请求，如果 Id 正确，它将删除该行。

如果我只使用一次按钮，它就可以正常工作。但是，如果我单击一行的按钮（因此它被删除），然后单击以删除另一行，我意识到请求被重复发送到 Web API，同时具有上一个调用的 Id 和当前调用.

因此，服务器会为已删除的 Id 抛出 NotFound 错误，而对于当前 id，它会很好地删除。 如果我用另一个按钮重复，它将发送三个删除请求。

我不是 javascript（或 ajax 或 jquery）方面的专家，所以我不知道我能做些什么来解决它。 （我看到了类似的帖子，但我找不到适合我的情况）

HTML 创建每一行：

// Note that it uses a data-customer-id to data attribute to hold the value
foreach (var customer in Model) 
    <tr>
        <td>
            // ( unrelated code) 
            // DELETE BUTTON
            <button type="button" class="btn btn-link js-delete" 
                    data-customer-id="@customer.Id" data-toggle="tooltip"         
                    data-placement="right" title="Using JQuery & AJAX">Delete
            </button>
        </td>
    </tr>

Javascript：

<script>
    $(document).ready(function() 
        $("#customers").on("click", ".js-delete",function() 
            //getting a reference for the button to be used when it's clicked
            var button = $(this);

            // call the modal (display the dialog box on the screen)
            $("#deleteModal").modal();

            // if the deleteConfirm button is clicked
            $("#deleteConfirm").on("click", function () 
                var urlLog = button.attr("data-customer-id");
                $.ajax(
                        url: "/api/customers/" + button.attr("data-customer-id"),
                        method: "DELETE",       
                        success: function () 
                            // case it's success, remove the row from the table
                            button.parents("tr").remove();
                        
                );
                // hide de modal (dialog box)
                $("#deleteModal").modal("hide");
            );      
        );
    );
</script>

Ouput in the Network tab in the browser

我原以为每次单击删除按钮只会向 WebApi 发送一个请求，而不是多个请求。

【参考方案1】：

发生这种情况是因为您每次单击 .js-delete 时都会将事件侦听器附加到您的 #deleteConfirm 元素。

重构 $("#deleteConfirm").on("click", function () ... 函数并将其移到 $("#customers").on("click", ".js-delete",function() ... 块之外。

【讨论】：

感谢您的回答。但是，我正在尝试这样解决，因为我从另一个中删除了一个“单击功能”，因此我无法保留调用第二个单击功能的按钮的引用。所以，最后，我无法删除正确的行（对象作为对象数组，它总是删除第一个，而不是我的选择）

【参考方案2】：

我按照上面的建议修改了我的代码并将两个点击功能分开。

附言。如果我将这两个函数都保留为一开始的样子，一个在另一个内部，我可以将此代码用于第二个单击功能，它也可以工作

$("#deleteConfirm").off().bind("click", function ()

最后，最终的脚本是：

$(document).ready(function() 

        $("#customers").on("click", ".js-delete",function() 
                //getting a reference for the button to be used when it's clicked
            var button = $(this);

            // STORE THE REFERENCE TO THE BUTTON
            $("#deleteConfirm").data('ref', button);
            // call the modal (display the dialog box on the screen)
            $("#deleteModal").modal();

        );

$("#deleteConfirm").on("click", function () 
                //var button = $("#customers .js-delete");
                // get the reference to the button
                var button = $(this).data('ref');
                $.ajax(

                    //url: "/api/customers/" + button.attr("data-customer-id"),
                    url: "/api/customers/" + button.attr("data-customer-id"),
                    method: "DELETE",       
                    success: function () 
                        // case it's success, remove the row from the table

                        button.parents("tr").remove();                                
                    
                );


                // hide de modal (dialog box)
                $("#deleteModal").modal("hide");
            );      

        );