提交表格前先致电ajax

Question

我想创建一个登录屏幕，在该屏幕上，单击按钮，ajax验证密码，然后提交表单。但是当我单击“提交”按钮时，表单在ajax调用之前提交，简而言之，动作方法和ajax都调用在同一按钮上单击，但我想在操作方法之前调用ajax

视图

@using (Html.BeginForm("Login", "AccountAP", FormMethod.Post))

{

@Html.AntiForgeryToken()
        <div class="login-box">
            <div class="login-logo">
                <!-- /.login-logo -->
                <div class="login-box-body">
                    <center><a href="#"><img src="img/ra_logo.png" class="img-responsive" width="128" height="128" /></a></center>
                    <br />
                    <p class="login-box-msg" style="font-size:20px !important;">Sign in to start your session</p>
                    <div class="form-group has-feedback">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control", @placeholder = "Email" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group has-feedback">
                        @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Password" } })
                        @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                    </div>

                    <div class="row">
                        <!-- /.col -->
                        <div class="col-xs-12">
                            <input type="submit" class="btn btn-primary pull-right btn-block btn-flat" value="Sign In" id="btnSave"/>
                        </div>
                        <!-- /.col -->
                    </div>
                </div>
                <!-- /.login-box-body -->
            </div>
        </div>
}
<script type="text/javascript">
        $('#btnSave').click(function (e) {
            e.preventDefault();
            e.alert("what's up");
        });
    </script>

Answer 1

检查以下代码：

第一种方法：

 @using (Html.BeginForm("Login", "AccountAP", FormMethod.Post,new { id= "submitForm" })) { <div class="col-xs-12"> <input type="submit" class="btn btn-primary pull-right btn-block btn-flat" value="Sign In" id="btnSave"/> </div> } <script> $(function () { $("#btnSave").click(function(){ //Code for ajax verify the password then call below submitForm after validation $("#submitForm").submit(); }); }); </script> 

第二种方法：

 @using (Html.BeginForm("Login","AccountAP",FormMethod.Post, new { onsubmit = "myJsFunction()" })) 

您的jquery代码应为：

<script>
    $(function () {
        $("#btnSave").submit(function (event) {
            event.preventDefault();
           e.alert("what's up");
          //Code for ajax verify the password then call below myJsFunction after validation 
           myJsFunction();
        });
    });
</script>

Answer 2

1. 我建议捕获表单上的Submit事件，而不是Submit按钮上的click事件。 因为人们不仅可以通过单击提交按钮来提交您的表单，还可以在文本区域中按Enter键...等等

2. 您将需要停止捕获的提交事件的默认浏览器行为，以便每当提交for时，浏览器就不会发布您的表单。 在jQuery中，您可以通过执行event.preventDefault（）;来停止默认设置。