提交表单时，我需要运行 addclass 并显示加载动画，然后运行 ajax 但是在ajax中添加false到async时，首先运行ajax，然后加载anamiatin执行。
$('.form-login').submit(function(e) {
$('#alert-massages').html("").removeClass("alert alert-warning");
$(".btn-login").addClass('loading');
$(".btn-login").attr('disabled','disabled');
if(formLogin.valid()) {
$.ajax({
url : "<%=checkOtpLoginUrl %>",
dataType : "json",
async: false,
data : {
"<%=renderResponse.getNamespace() %>msisdn" : $("#<%= renderResponse.getNamespace() %>msisdn").val(),
"<%=renderResponse.getNamespace() %>password" : $("#<%= renderResponse.getNamespace() %>password").val(),
"<%=renderResponse.getNamespace() %>captchaText" : $("#<%= renderResponse.getNamespace() %>captchaText").val(),
"<%=renderResponse.getNamespace() %>rememberMe" : $("#<%= renderResponse.getNamespace() %>remember").val()},
method : "post"
}).done(function(data) {
if (data.result) {
最佳答案
问题就在这里:
async: false
一方面，这已被弃用(或者至少很快就会被弃用？)，并且在最近或 future 的浏览器更新中不太可能得到支持。首先，这始终是一种不好的做法，并且会使您的代码违背 JavaScript 原则。不要使用它。
但是更重要的是，它明确告诉您的浏览器将此异步操作设为阻塞调用。这意味着在操作完成之前浏览器无法执行任何 UI 更新。修改 DOM 元素的类是 UI 更新。底层 DOM 本身正在更新，但在所有阻塞操作完成之前，浏览器无法在屏幕上呈现该更改。
使您的异步操作异步。删除async: false。这将允许浏览器进行您想要的 UI 更新。
如果有一些其他原因导致您认为您需要使用async: false，那么这就是您需要解决的实际问题。目前，您的代码只是通过创建另一个问题来隐藏该问题。
关于javascript - Jquery 使用 ajax 在提交表单中使用 addclass，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54007205/