Question

我今天在使用AJAX表时遇到了一些麻烦。我尝试了很多东西，却无法让它发挥作用。

我的jQuery应该阻止表单提交。它必须通过AJAX。然而，似乎忽略了event.preventDefault（）;并提交表格。

表单是“单页”的一部分。单页是通过AJAX加载的页面。表单是POST方法的标准表单。

问题：为什么event.preventDefault（）不起作用以及如何解决此问题？

形式：

<form id="comment-form" action="commentsystem.php" method="post">
<input type="text" placeholder="Write a comment..." name="commentTxt" />
<input type="hidden" value="'.$row['id'].'" name="postID" />
<div class="submit-btn">
    <img src="assets/images/checkmark.svg" />
    <input type="submit" value="" />
</div>

Jquery的：

$('#comment-form').on('submit', function (event) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    // Serialize the form data.
    var formData = $('#comment-form').serialize();

    $.ajax({
        type: 'post',
        url: $(form).attr('action'),
        data: formData,
        success: function (response) {
            $('.comment-container').append(response);
        }
    });
});

Commentsystem.php：

$sql = "INSERT INTO comments (postID, userID, comment) VALUES ('$_POST[postID]', '$_SESSION[id]', '$_POST[commentTxt]')";

if ($conn->query($sql)===TRUE){
    echo '<p><span class="username">'.$_SESSION[id].'</span>'.$_POST[commentTxt].'</p>';
} else{
    echo 'Something went wrong while sending your comment.';
}

Answer 1

该晚了！我最近遇到了这个问题，希望这对其他人有帮助。我不确定为什么会发生这种情况，但是在我的本地主机上，以下命令运行良好，但是在生产中，preventDefault无法正常工作。

$(document).ready(function() {
    $(document).on('submit', ".edit-form", function(event) {
        event.preventDefault(); // Stop form from submitting normally
        var url = $(this).attr("action"); // where to post to
        // more code
        return false; // added for good measure(might not need)
    });
});

显然，.on（）不喜欢位于$（document）.ready（）中，并且从某些阅读中也不必如此。如果您像以前一样使用它，那就太好了，因为我正在替换也需要它的表单。

因此，您所需要做的就是删除$（document）.ready（）{};。看看它是否像这样工作。

$(document).on('submit', ".edit-form", function(event) {
    event.preventDefault(); // Stop form from submitting normally
    var url = $(this).attr("action"); // where to post to
    // more code
    return false; // added for good measure(might not need)
});

正如我说的那样，我不确定为什么会这样，很长一段时间以来我并没有把jQuery弄糟，我所知道的是，它在我的localhost上的preventDefault可以按预期工作，并且在生产时它忽略了它。 如果有人能指出正确的方向，为什么它可以在本地而不是在生产上工作？ 也许托管公司的PHP设置？（目前还没有任何线索，正在抓住稻草）

Answer 2

我自己已经弄清楚了。我发布了自己的答案，因为它可能有助于其他人。

我改变了：

$('#comment-form').on('submit', function (event) {

为：

$(document).on("click",".comment-submit", function(event) {

请注意，我在表单中的“提交”按钮中添加了一个类。我不知道为什么这有效，但确实如此。如果有人能够解释，那就不胜感激了。

event.preventDefault（）不使用AJAX

2 个答案: