jQuery ajax 表单错误答案

【问题标题】：jQuery ajax form errorjQuery ajax 表单错误
【发布时间】：2013-02-06 10:05:56
【问题描述】：

我在使用点击事件时遇到错误。在服务器端代码完成之前，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>

【问题讨论】：

标签： javascript jquery asp.net-mvc-4 jquery-validation-engine

【解决方案1】：

尝试添加这个：

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

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

为避免在单击提交按钮时提交表单，您必须使用e.preventDefault(); 防止提交按钮的默认行为

【讨论】：