我正在尝试发布评论，工作一秒钟，但一旦我点击提交按钮，它们就会消失答案

【问题标题】：I am trying to POST comments, working for one second but then they disappear once I click on submit button我正在尝试发布评论，工作一秒钟，但一旦我点击提交按钮，它们就会消失
【发布时间】：2017-04-26 02:26:57
【问题描述】：

评论显示一秒钟，然后在我发布后消失，无需刷新页面。
你能帮帮我吗？
我想将它们（下面的用户名和评论）附加到一个 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>

【问题讨论】：

嘿，刷新后它们会消失还是添加后会自动从视图中消失
添加后抱歉
您可以尝试将评论数据包装在
标记或合适的标记中并附加而不是直接附加数据
我试过但找不到合适的解决方案，你能帮我写代码吗？
当然，是否可以看到代码，上传到 Plunker 之类的东西上

标签： javascript jquery ajax post

【解决方案1】：

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

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

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

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

【讨论】：

我试过了，但还是同样的问题！！我已将输入更改为按钮，并尝试使用 preventDefault() 感谢您的帮助
@MatteoSoresini，将$("#submit").click(function() { 更改为$("#submit").click(function(event) {，然后添加event.preventDefault(); 作为点击函数中的第一行。此外，您的.ajax 网址指向$(this).attr('action'),。在这种情况下，我认为$(this) 是您的$("#submit") 按钮。这个按钮没有设置“动作”属性，所以它会失败。此外，即使您将其指向表单元素的本机操作属性，您也没有在那里设置一个，所以它会再次失败。 .ajax() 电话在做什么？它是否需要发送到服务器？

【解决方案2】：

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

【讨论】：

它实际上正在工作，但是一旦我发布它并再次消失页面就会自动刷新