Question

我想创建一个登录界面，点击按钮，ajax验证密码，然后提交表单。但是当我点击提交按钮时，表单在ajax调用之前提交简而言之，action方法和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

检查以下代码：

第一种方法：

＆＃13;

@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>

＆＃13;

第二种方法：

＆＃13;

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

＆＃13;

您的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

我建议在表单上捕获提交事件，而不是在提交按钮上捕获click事件。因为人们不仅可以通过点击提交按钮提交表单，还可以在文本区域中点击回车键等等
您需要停止捕获的提交事件的默认浏览器行为，以便每当提交for时，浏览器都不会发布您的表单。在jQuery中，您可以通过执行event.preventDefault（）;

在提交表单之前调用ajax

2 个答案: