我想使用event.preventDefault();但我的表格仍在提交。 并给我一个带有json响应的页面。我的控制台没有任何错误。
这是我的脚本:
$(document).ready(function() {
$('#add_to_cart ').on('submit', function(event) {
event.preventDefault();
var $form = $(event.target);
var data = $form.serialize();
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: data,
success: function(response, status, xhr) {
var message = response.message;
showToastMessage(message, 'toast-success');
}
}).fail(function(xhr, textStatus) {
var message = "Error.";
if (xhr.responseText) {
var error = JSON.parse(xhr.responseText);
if (error) {
error = error.message;
if (error) {
message = error;
}
}
}
showToastMessage(message, 'toast-error')
});
return false;
});
});
function showToastMessage(message, type) {
var $toastElem = $("#snackbar");
$toastElem.className = "show";
$toastElem.html(message).removeClass('toast-success').removeClass('toast-error').addClass(type).addClass('show');
}
我已经看到了有关该问题的大多数问题,但是我仍然有问题。
html:
<form action="{{ route('cart.add', $product->id) }}" method="POST" id="add_to_cart">
<a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>
</form>
答案 0 :(得分:0)
这是您的问题:
<a href="javascript:{}" rel="nofollow" data-nid="4165" class="cart-button ripple add-to-cart has-ripple" onclick="parent().submit();";>add</a>
提交事件仅由表单提交触发,而表单提交由标准提交方法(如提交按钮)触发。
使用JavaScript调用表单的submit()
方法将完全绕过Submit事件。
由于事件不会触发,因此不会调用事件侦听器功能,因此永远不会调用event.preventDefault()
。
使用一个提交按钮,而不是一个没有附加有用的JS链接的链接。