在ajax之前和之后使用jQuery更新按钮文本

Question

我正在尝试在 ajax 请求之前和之后更新登录按钮文本。然而，当按下提交按钮时，在 ajax 完成之前实际上没有任何变化。 （如果我没有在 ajaxComplete 上执行任何操作，按钮将显示“正在登录”，但直到 AJAX 请求完成为止。）。

控制台日志会在正确的时间添加。

<form id="loginForm" class="needs-validation" method="post" onsubmit="return false" novalidate>
   <div class="mb-3">
        <label class="form-label">Username</label>
        <input type="text" class="form-control rounded-pill" asp-for="Email" placeholder="Enter email" required>
    </div>

    <div class="mb-3">
        <label class="form-label">Password</label>
        <div class="position-relative auth-pass-inputgroup mb-3">
            <input type="password" class="form-control pe-5 password-input rounded-pill" asp-for="Password" placeholder="Enter password" required>                                                
        </div>
    </div>

    <div class="custom-control custom-switch custom-switch-square custom-control-success mb-2">                                            
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-orange w-100 rounded-pill" onclick="SignIn()" id="btnSignIn">Sign In</button>
    </div>

    <div class="float-end">
        <a href="/Home/ForgottenPassword" class="text-muted">Forgot password?</a>
    </div>
</form>

$(document).on("ajaxStart", function () {
    console.log("AJAX START");

    $("#btnSignIn").html("Logging in...");
});

$(document).on("ajaxComplete", function () {
    console.log("AJAX COMPLETE");

    $("#btnSignIn").html("Sign In");
});

$(document).on("ajaxError", function () {
    console.log("AJAX ERROR");
});

async function SignIn() {
    var valdata = $("#loginForm").serialize();

    await $.ajax({
        type: "POST",
        url: "/Home/LoginSubmitJson",
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: "json",
        data: valdata,
        async: false,
        success: function (response) {
            if (response.success) {
                window.location.href = '/Dashboard/Index';
            }
            else {
            
                Toastify({ text: "An error occurred whilst signing you in.", duration: 1000, className: "bg-danger" }).showToast();
            }
        },
        failure: function (response) {
            Toastify({ text: "Error", duration: 1000, className: "bg-danger"}).showToast();
        },
        error: function (response) {
            Toastify({ text: "Error", duration: 1000, className: "bg-danger" }).showToast();
        }
    });
};

Answer 1

**Try this code**

Example:https://jsfiddle.net/L6srncbq/13

  <form id="loginForm" class="needs-validation" method="post" onsubmit="return false" novalidate>
       <div class="mb-3">
            <label class="form-label">Username</label>
            <input type="text" class="form-control rounded-pill" name="email" asp-for="Email" placeholder="Enter email" required>
        </div>
    
        <div class="mb-3">
            <label class="form-label">Password</label>
            <div class="position-relative auth-pass-inputgroup mb-3">
                <input type="password" class="form-control pe-5 password-input rounded-pill" name="password" asp-for="Password" placeholder="Enter password" required>                                                
            </div>
        </div>
    
        <div class="custom-control custom-switch custom-switch-square custom-control-success mb-2">                                            
        </div>
    
        <div class="mt-4">
            <button type="submit" class="btn btn-orange w-100 rounded-pill" id="btnSignIn">Sign In</button>
        </div>
    
        <div class="float-end">
            <a href="/Home/ForgottenPassword" class="text-muted">Forgot password?</a>
        </div>
    </form>
    
    <script>
    const form = document.querySelector("#loginForm");
    const fields = form.querySelectorAll("input");
    const submitBtn = form.querySelector("button[type='submit']");
    
    form.addEventListener("submit", async (e) => {
      e.preventDefault();
    
      submitBtn.innerText = "Logging In";
      const calldata = {};
    
      fields.forEach((field) => {
        if (field.value === "") {
          field.classList.add("error");
        } else {
          field.classList.remove("error");
          calldata[field.name] = field.value;
        }
      });
    
      console.log(calldata);
    
      const url = "/Home/LoginSubmitJson";
    
      try {
        const response = await fetch(url, {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
          },
          body: new URLSearchParams(calldata),
          credentials: "include",
        });
    
        const data = await response.json();
    
        if (data.success) {
          window.location.href = "/Dashboard/Index";
        } else {
          submitBtn.innerText = "Sign In";
          Toastify({
            text: "An error occurred whilst signing you in.",
            duration: 1000,
            className: "bg-danger",
          }).showToast();
        }
      } catch (error) {
        console.error("Error:", error);
        submitBtn.innerText = "Sign In";
      }
    });
    </script>


  [1]: https://jsfiddle.net/L6srncbq/13