我做了一个**blogging application in Laravel 8**。
我目前正在努力通过 AJAX 提交评论和评论回复,而不是“经典地”这样做。
注解表单:
<div id="commentSuccess-{{ $comment->id ?? '' }}" class="alert-box-ajax alert-box alert-box--success">
Your comment is pending
</div>
<div id="commentFail-{{ $comment->id ?? '' }}" class="alert-box-ajax alert-box alert-box--error">
Failed to add comment!
</div>
<form class="commentForm" method="post" action="{{ route('comment.submit') }}" autocomplete="off">
@csrf
<fieldset>
<input type="hidden" name="article_id" value="{{ isset($article->id) ? $article->id : $article_id }}">
<input type="hidden" name="parent_id" value="{{ $comment->id ?? '' }}">
<div class="message form-field">
<textarea name="msg" id="message" class="h-full-width" placeholder="Your Message" required></textarea>
@error('msg')
<p class="help-block text-danger">{{ $message }}</p>
@enderror
</div>
<br>
<input name="submit" id="submit" class="btn btn--primary btn-wide btn--large h-full-width" value="Add Comment" type="submit">
</fieldset>
字符串
对于验证,我使用Jörn Zaefferer的**jQuery Validation Plugin**(v1.19.0)
(jQuery) AJAX 部分:
// Validate comment form
$(".commentForm").each(function() {
var form = $(this);
form.validate({
errorElement: 'p',
errorClass: "help-block text-danger",
submitHandler: function(event) {
event.preventDefault();
var $fields = form.find('textarea'),
url = form.attr('action'),
data = form.serialize();
$.ajax({
dataType: "json",
type: "post",
url: url,
data: data,
cache: false,
success: function(response) {
$('#commentSuccess-${data.article_id}`').slideDown(250).delay(2500).slideUp(250);
$fields.val('');
},
error: function() {
$(`#commentFail-${data.article_id}`).slideDown(250).delay(2500).slideUp(250);
}
});
}
});
});
型
问题是
出于某种原因,我一直无法找到,应该阻止“经典”表单提交的部分,event.preventDefault()
不起作用。
问题:
1.我做错了什么?
1.解决此问题的最可靠方法是什么?
2条答案
按热度按时间nwwlzxa71#
在做了一些研究之后,我发现事件实际上是submitHandler中接收的第二个参数。第一个是形式本身。
由于某些原因,文档不同步。
您可以尝试此操作以阻止表单默认表单提交。
字符串
的数据
j2qf4p5b2#
不太熟悉jQuery验证插件,但我希望将验证代码放在Document Ready函数中会有所改变。
字符串
或
型