javascript - 如何防止ajax在更改输入数据时发送多个请求

Question

我使用ajax将参数从Modal中的输入字段发送到 Controller ，但是，当我更改值并关闭模态时，ajax 会记住它，当我调用它时，Ajax 会使用旧值和新输入多次请求。

    <!--Add post to seri -->
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Add post to serie</h4>
                <button type="button" class="close cleardt" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-9">
                        <input type="number" required id="IDPost" placeholder="Nhập id bài viết" class="form-control" />
                    </div>
                    <div class="col-3">
                        <button class="btn btn-info" id="btnCheck">Check</button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="message-text" class="col-form-label">Bài viết gốc:</label>
                    <p id="postName" class="text-primary bold">ID không hợp lệ</p>
                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" id="addPostBtn" disabled class="btn btn-success">Thêm</button>
                <button type="button" class="btn btn-secondary cleardt" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

我的ajax语法:

 var serieid = '@Model.SerieID';
$('#addBtn').click(function () {
    var amodal = $('#addModal');
    $('#IDPost').val(null);
    amodal.modal('show');
    $('#addPostBtn').click(function () {
        var idpost = $('#IDPost').val();
        amodal.modal('hide');
        $.ajax({
            type: "POST",
            url: '/Admin/AddToSerie',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ id: idpost, seriid: serieid }),
            dataType: "json",
            success: function (recData) {
                var notify = $.notify('<strong>Successfully
</strong><br/>' + recData.Message + '<br />', {
                    type: 'pastel-info',
                    allow_dismiss: false,
                    timer: 1000,
                });
                if (recData.reload != false) {
                    setTimeout(function () {
                        window.location.reload();
                    }, 1500);
                }

            },
            error: function () {
                var notify = $.notify('<strong>Error</strong><br/>Không thêm được<br />', {
                    type: 'pastel-warning',
                    allow_dismiss: false,
                });
            }
        });


    });

});

我正在寻找一种方法来清除输入字段的值队列，但它不起作用

Answer 1

$('#addPostBtn').click 将 EventListener 添加到元素。

每次点击#addBtn时都会调用它，因此多个事件监听器会附加到addPostBtn。这就是您的 ajax 被多次调用的原因。

您可以使用 jQuery 的 on 和 off 来修复它。

...
amodal.modal('show');
$('#addPostBtn').off('click');
$('#addPostBtn').on('click', function () { ... });

或者可以通过将 $('#addPostBtn').click 移出 $('#addBtn').click 函数来修复。

$('#addBtn').click(function () {
    var amodal = $('#addModal');
    $('#IDPost').val(null);
    amodal.modal('show');
});

$('#addPostBtn').click(function () { ... });