Question

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

我有一个网页，该网页具有一个表（使用JQuery Datatable），并且该表中的每一行都有一个删除按钮，用于保存每一行的ID。该ID用于将Delete请求发送到Web API（位于同一项目中），如果ID是正确的，它将删除该行。

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

由于这个原因，服务器将为已删除的ID引发NotFound错误，对于当前ID，它将删除就可以了。如果我重复另一个按钮，它将发送三个删除请求。

我不是Java语言（或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发送一个请求，而不是多个请求。

Answer 1

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

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

Answer 2

我按照上面的建议修改了代码，并分离了两个click函数。

Ps。如果我将两个函数都保留在开头，一个保留在另一个内部，那么我可以将此代码用于第二个单击功能，它也可以工作

$("#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");
            });      

        });

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

2 个答案: