AJAX 表单提交仅适用于第一次提交答案

【问题标题】：AJAX form submit only works on first submitAJAX 表单提交仅适用于第一次提交
【发布时间】：2018-09-08 14:23:37
【问题描述】：

脚本.JS

$(document).ready(function(){
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'data/addtext.php',
            dataType: 'HTML',
            success: function (result) {
                $('#meo').html(result);
            }
        });
    });
});

索引.PHP

<div id="meo"></div>

ADDTEXT.PHP

<?php echo "HELLO WORLD" ?>

以上是我的代码。我想要发生的是每次我提交表单时，都会打印出“HELLO WORLD”这个词，这个代码在第一次点击提交时工作，输出将是

HELLO WORLD

现在，我想再次打印它，所以我将再次单击提交按钮，但在第二次提交时，什么都没有打印出来。为什么？

我想要的输出是

HELLO WORLD HELLO WORLD

换句话说，我想在每次提交时打印出“HELLO WORLD”，但旧的输出将保留。所以如果我提交表单 3 次，那么输出应该是

HELLO WORLD HELLO WORLD HELLO WORLD

我知道我可以使用追加而不使用表单来执行此操作，但我想使用表单 ajax 来执行此操作而无需重新加载页面。此代码再次起作用，但仅在第一次单击提交时起作用。

为什么在第二次点击提交时不起作用？

【问题讨论】：

您没有将结果附加到#meo，您每次都完全替换它。而不是$('#meo').html(result); 尝试$('#meo').html($('#meo').text() + result);
@ochi ，因为你的评论，我终于明白了，答案很简单，我没有注意到。谢谢

标签： php jquery ajax ajaxform

【解决方案1】：

您没有将结果附加到#meo，而是每次都完全替换它。

代替

$('#meo').html(result);

尝试将result 附加到#meo 中的现有值/html。喜欢：

$('#meo').html($('#meo').text() + result);

【讨论】：

它的工作，谢谢！我没有意识到我每次提交时都会替换它。

【解决方案2】：

. html() 覆盖您设置的元素内的内容。试试. append()。

【讨论】：

这也有效。谢谢。一旦我达到 15 声望，就会对此表示支持。

【解决方案3】：

$(document).ready(function(){
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'data/addtext.php',
            dataType: 'HTML',
            success: function (result) {
                // This should work for you
                $('#meo').html($('#meo').html() + result);
            }
        });
    });
});

【讨论】：