javascript - jQuery ajax 表单错误

Question

我在使用点击事件时遇到错误。在服务器端代码完成之前，Ajax 调用被“取消”。然后我在 $Ajax 错误方法上做了一个调试器，statusText 只是说 statusText: "error" .我通过删除 <form id="formid">.... <form/> 找到了一个临时解决方案.但由于我使用的是 jQuery.ValidationEnginen，它只能用于 .

jQuery 代码:

$("#formid").validationEngine('attach', { scroll: false }).css({ color: "#4a6b0e" });

    $('#submitLogin').click(function () {
          var self = this;
            var UserName = $("#UserName").val();
            var Password = $("#Password").val();
            var RememberMe = $("#RememberMe").val();
            var PropertyId = ol.property.infoId;
            $.ajax({
                type: "POST",
                url: ol.url("~/Authentication/LogIn"),
                data: { "UserName": UserName, "Password": Password, "RememberMe": RememberMe },
                success: function (data) {

                  if (data.Errormes) {
                    $("#Result").html("Error: " + data.Errormes);
                  } else {
                    window.location.reload();
                  }
                },
                error: function (data, arg1, arg2, arg3) {
                  alert("Error: Run for your life!!");
                }
            });
        });

形式:

<form id="formid">
            <div class="LeftCol">Brugernavn</div>
            <div class="RightCol">
                <input type="text" style="width: 250px" id="UserName" name="UserName" class="validate[required,custom[email]]">
            </div>
            <div class="LeftCol">Adgangskode</div>
            <div class="RightCol">
                <input type="password" style="width: 250px" id="Password" name="Password" class="validate[required]" />
            </div>
            <div class="LeftCol">Husk mig?</div>
            <div class="RightCol">
                <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true">
            </div>
                <br><div class="RightCol" id="Result" style="color:red;"></div><br>
        <input id="submitLogin" type="submit" value="Log in" class="oline-button-green white" />
 </form>

Answer 1

尝试添加这个:

 $('#submitLogin').click(function (e) {
    e.preventDefault();
   // ...
 });

由于您将点击事件绑定(bind)到提交按钮，您的 ajax 请求被异步发送并且表单也被发送，这导致页面重新加载和 ajax 请求被取消。

为了避免在您点击提交按钮时提交表单，您必须使用 e.preventDefault();

阻止提交按钮的默认行为