Question

概述：

我在JQuery按钮点击事件中设置了一个Ajax POST方法。此实现工作正常，并且未通过指定evt.preventDefault();来刷新页面。但现在我在按钮点击事件中添加了对表单提交$createForm.submit();的调用。（为了在通过Ajax提交之前在页面上触发验证。）

问题：

添加此调用的问题是页面验证后页面现在会再次刷新，然后单击“提交”按钮。

我确实搜索了该问题，并在按钮点击事件as suggested here的末尾添加return false;并不会阻止页面刷新。

问题： 如何在按钮单击事件中阻止Ajax页面刷新？

下拉按钮中包含按钮的Html：

                                               <div class="btn-group dropup">
                                                    <button type="submit" class="btn btn-success dropdown-toggle"  style="background-color: #0CA281;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        SUBMIT <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li id="submitAndEmailBtn"><a>Submit + Email</a></li>
                                                        <li role="separator" class="divider"></li>
                                                        <li id="submitBtn"><a>Submit Only</a></li>
                                                    </ul>
                                                </div>

submitAndEmailBtn点击事件中的Ajax调用：

    //Ajax POST method fired on submitAndEmailBtn li button click
    $('#submitAndEmailBtn').click(function(evt) 
    { 
        //call to prevent default refresh
        evt.preventDefault();

        //call submit on the form to run validation
        //before running the Ajax call.
        $createForm.submit();

        //swal dialog to confirm or cancel Ajax call
        swal({
            title: "Submit & Email",
            text: "Are you sure?",
            type: "warning",
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: true,
        }, function () {
            $.ajax({
                url: "@(Url.Action("EmailAndSubmit", "CreateEsc"))",
                type: 'POST',
            traditional: true,
            data: $("#createForm").serialize(),
            dataType: "json",
            success: function (result) {
                if (result.Success) {
                    swal("Emailed and Submitted!");
                    window.location.href = result.redirectUrl;
                }
                else {
                    $('#submitStatus').text("Error occurred while processing your request");
                    $(this).addClass('alert alert-danger fade in');
                    $('#submitStatus').show();

                }
            },
            //catches any HTTP error after AJAX method return 
            error: function (jqXHR, exception) {
                var msg = '';
                if (jqXHR.status === 0) {
                    msg = 'Not connect.\n Verify Network.';
                } else if (jqXHR.status == 404) {
                    msg = 'Requested page not found. [404]';
                } else if (jqXHR.status == 500) {
                    msg = 'Internal Server Error [500].';
                } else if (exception === 'parsererror') {
                    msg = 'Requested JSON parse failed.';
                } else if (exception === 'timeout') {
                    msg = 'Time out error.';
                } else if (exception === 'abort') {
                    msg = 'Ajax request aborted.';
                } else {
                    msg = 'Uncaught Error.\n' + jqXHR.responseText;
                }
                $('#submitStatus').text("Error occurred while processing your request. Detail: " + msg);
                $(this).addClass('alert alert-danger fade in');
                $('#submitStatus').show();
            },
            });
        });

        return false;

    });

Answer 1

尝试用$ myForm.find替换$ myForm.submit（）（＆＃39;：submit＆＃39;）。click（）

@Abraham在this thread上提供

Answer 2

即使它很旧，也从未得到回答。尝试将type=submit替换为type=button。

<button type="button" class="btn btn-success dropdown-toggle"  style="background-color: #0CA281;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    SUBMIT <span class="caret"></span>
</button>

如何防止按钮单击事件中的Ajax页面刷新？

2 个答案: