Question

评论会显示一秒钟，然后在我发布后消失，而不刷新页面你能帮帮我吗？我想在div中附加它们（下面的用户名和注释）。

这是到目前为止的代码：

$("#submit").click(function() {
    var comment = $("#comment").val();
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $("#result").append(comment);
        }
    })
});

<form action="" method="POST">
    <fieldset>
        <legend>Add a comment</legend>
        <label for="user">Username</label>
        <input type="text"  name="user" id="user" value="" maxlength="20">
        <br><br>
        <label for="comment">Comment</label>
        <textarea rows="6" cols="50" name="comment" id="comment"></textarea>
        <br><br>
        <input type="submit" id="submit" value="Submit" name="submit">
    </fieldset>
</form> 
<div id="result"></div>

Answer 1

而不是$("#result").append(comment);，请尝试$("#result").html(comment);

Answer 2

它工作1秒然后消失的原因是当用户点击提交按钮时发生了两件事情。

首先，触发了你的jQuery，它启动了Ajax请求（你说它正常工作）。

其次，启动默认的HTML表单提交按钮操作，在此实例中执行页面刷新。

你有两种解决方法。首先，您可以将<input type="submit">按钮更改为常规<button>，以便不会发生常规HTML表单提交（但您的jQuery仍会运行）。或者，您可以在jQuery单击命令中调用event.preventDefault();，这将阻止发生默认的HTML表单提交。更多信息here。

我正在尝试发布评论，工作一秒钟但是一旦我点击提交按钮

2 个答案: