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

尝试每次在ajax网址后附加唯一的文本，例如

var ts =（new Date（））。getMilliseconds（）;

    <v-flex>
     <v-btn>
     Hello!!
    </v-btn>

     <v-textarea
   placeholder="can it be the size of the button above somehow? Also how can i add an icon after the placeholder end?"
   rows="1">
     </v-textarea>
    </v-flex>

通过将日期的所有其他部分串联起来，更改getMilliseconds以提供真正唯一的值。

Answer 2

cost_ten将EventListener添加到元素。

每次单击$('#addPostBtn').click时都会调用它，因此将多个事件侦听器附加到#addBtn。这就是为什么您的ajax被多次调用的原因。

您可以使用jQuery的addPostBtn和on对其进行修复。

off

或者可以通过将... amodal.modal('show'); $('#addPostBtn').off('click'); $('#addPostBtn').on('click', function () { ... });从$('#addPostBtn').click函数中移出来固定它。

$('#addBtn').click

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);
        }

}
});});

更改输入数据时如何防止Ajax发送多个请求

3 个答案: