Как запретить 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 вызывался несколько раз.

Вы можете исправить это, используя on и off jQuery.

...
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 () { ... });

Answer 2

Попробуйте каждый раз добавлять уникальный бит текста в URL-адрес ajax, например,

var ts = (new Date ()). GetMilliseconds ();

$.ajax({
    type: "POST",
    url: '/Admin/AddToSerie?ts=' + ts,
    contentType: "application/json; charset=utf-8",
        ......

Измените getMilliseconds наобеспечить действительно уникальное значение, скажем, путем объединения всех других частей даты.

Answer 3

v**separate modal click and ajax click event**ar 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);
        }

}
});});