javascript - 更改数字输入时通过 AJAX 更新表格

Question

我遇到了通过 jQuery 进行 AJAX 更新的问题。我有一个“数字”类型的输入字段。每次用户通过向上单击或向下单击更新其值时，表都会通过 AJAX 更新。

它可以工作，但是：如果你更新它的值太快，jQuery 会跳过一些步骤并且只更新几次。有什么方法可以防止这种情况并在每次单击时触发 AJAX 功能？

另外：您可以通过输入数字来将数字添加到输入数字中，而无需单击向上和向下按钮。有什么办法可以防止吗？

Answer 1

您需要禁用触发 AJAX 的控件，直到它成功完成或失败。

如果您查看jQuery.post()文档，您会看到每个处理程序：

// disable the up and down UI elements here, re-enable in the .always() function
var jqxhr = $.post("example.php", function() {
  alert("success");
})
.done(function() { alert("second success"); })
.fail(function() { alert("error"); })
.always(function() { alert("finished"); });

Answer 2

您可以使用以下方法禁用输入：

<input type="text" disabled>

至于您的 ajax 问题，部分解决方案是使用以下方法禁用两个按钮：

beforeSend: {
disable buttons
}
complete: {
enable buttons
}

然而，可能有一些更好的方法来完成你想要的。

Answer 3

或者你可以做类似的事情

@Ajax.BeginForm("Details","Item",
        new AjaxOptions
        { HttpMethod = "GET", UpdateTargetId ="searchResults",
        InsertionMode= InsertionMode.Replace})

<h2> Search Your Jazz </h2>
<h2>
    Item ID: @Html.TextBox("search")<br />
    <input type="submit" value="Details"/>
</h2>
@{ Html.EndForm();}
<br/>
<div id="searchResults">