AJAX 表单提交仅适用于首次提交

Question

SCRIPT.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);
            }
        });
    });
});

INDEX.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 来完成此操作而无需重新加载页面。此代码再次起作用，但仅在第一次单击提交时有效。

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

Answer 1

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

而不是

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

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

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

Answer 2

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

Answer 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);
            }
        });
    });
});

AJAX 表单提交仅适用于首次提交

AJAX form submit only works on first submit

php

ajax

jquery

ajaxform