【发布时间】：2016-06-24 08:30:36
【问题描述】：
概述：
我在 JQuery 按钮单击事件中设置了 Ajax POST 方法。此实现运行良好，并且没有通过指定evt.preventDefault(); 刷新页面。但现在我在按钮单击事件中添加了对表单提交$createForm.submit(); 的调用。 （为了在通过 Ajax 提交之前在页面上触发验证。）
问题：
添加此调用的问题是页面现在在验证页面并单击提交按钮后再次刷新。
我确实对该问题进行了搜索，并将return false; 添加到按钮单击事件的末尾as suggested here 不会阻止页面刷新。
问题： 如何防止在按钮单击事件中刷新 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;
});
【问题讨论】：
标签： ajax model-view-controller onclick page-refresh preventdefault