[英]How to prevent ajax send multiple request when change input data
Im using ajax to send a parameter from input field in Modal to Controller, But when i change the value and close the modal, ajax remember it and when i call it, Ajax request multiple times, with old values and the new of the input. 我使用ajax从Modal的输入字段中向控制器发送参数,但是当我更改值并关闭模式时,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">×</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>
My ajax syntax: 我的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,
});
}
});
});
});
Im finding a way to clear the value queue of input field but it doesnt work 我正在寻找一种方法来清除输入字段的值队列,但它不起作用
Try appending a unique bit of text to ajax url every time, eg 尝试每次都在ajax网址后附加一小段文字,例如
var ts = (new Date()).getMilliseconds(); var ts =(new Date())。getMilliseconds();
$.ajax({
type: "POST",
url: '/Admin/AddToSerie?ts=' + ts,
contentType: "application/json; charset=utf-8",
......
Change the getMilliseconds to provide a genuinely unique value, say by concatenating all the other portions of the date. 更改getMilliseconds以提供真正唯一的值,例如通过串联日期的所有其他部分。
$('#addPostBtn').click
add a EventListener to the element. $('#addPostBtn').click
将EventListener添加到元素中。
It is called every time when #addBtn
is clicked, so multiple event listeners are attached to addPostBtn
. 每次单击#addBtn
时#addBtn
调用它,因此将多个事件侦听器附加到addPostBtn
。 That's why your ajax was called multiple times. 这就是为什么您的ajax被多次调用的原因。
You can fix it by using on
and off
of jQuery. 您可以通过on
和off
jQuery来修复它。
...
amodal.modal('show');
$('#addPostBtn').off('click');
$('#addPostBtn').on('click', function () { ... });
Or it can be fixed by moving $('#addPostBtn').click
out of $('#addBtn').click
function. 或者可以通过将$('#addPostBtn').click
移出$('#addBtn').click
函数来解决。
$('#addBtn').click(function () {
var amodal = $('#addModal');
$('#IDPost').val(null);
amodal.modal('show');
});
$('#addPostBtn').click(function () { ... });
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);
}
}
});});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.