AJAX提交表单后如何保留表单并显示PHP返回内容？

这个问题的核心原因是你在AJAX请求成功后，用$(".subscribe_wrapper").html(data)把整个容器的内容完全替换成了PHP返回的提示信息——从你描述的“表单消失”来看，应该是实际HTML结构里表单包含在.subscribe_wrapper中，所以表单自然会被覆盖掉。

下面给你两种简单的解决方案，推荐第一种更优雅的实现：

方案1：新增独立消息容器（推荐） #

专门设置一个元素用来显示AJAX返回的提示，表单保持不动，这样既能展示反馈信息，又不会影响表单的存在。

修改后的HTML代码 #

<div id="form" class="subscribe_wrapper">
  <form id="subscribe" method="POST">
      <input name="email_subscribe" type="text" placeholder="Enter your email" />
      <input class="subscribe_newsletter" id="subscribe_newsletter" type="submit" name="submit" value="Subscribe">
  </form>
  <!-- 新增这个容器用来展示返回消息 -->
  <div id="subscribe_message" style="display:none;"></div>
</div>

修改后的JavaScript代码 #

$(document).ready(function() {
    $('.subscribe_newsletter').click(function(e) {
        e.preventDefault();
        var data = $("#subscribe").serialize();
        
        // 清空之前的消息（可选）
        $('#subscribe_message').empty().hide();
        
        $.ajax({
            type: 'POST',
            url: 'email_subscribe.php',
            data: data,
            success: function(data) {
                // 将返回内容插入到消息容器，而非替换整个表单容器
                $("#subscribe_message").fadeIn(500).html(data);
                // 提交成功后清空输入框，提升用户体验
                $('input[name="email_subscribe"]').val('');
            }
        });
        return false;
    });
});

方案2：保留表单并追加提示信息 #

如果不想新增容器，也可以先保存表单的HTML结构，再将返回内容和表单一起重新插入到容器中，但这种方式会重新渲染表单，不如方案1灵活：

修改后的JavaScript成功回调函数 #

success: function(data) {
    // 保存当前表单的完整HTML
    const formHtml = $('#subscribe')[0].outerHTML;
    // 将表单和返回提示组合后放回容器
    $(".subscribe_wrapper").fadeIn(500).html(formHtml + data);
}

小提示：修复PHP的字符串拼接问题 #

你的PHP代码里有个小细节：echo $_POST['email_subscribe'] . 'is added to the list!'; 这里邮箱和is之间缺少空格，会显示成xxx@example.comis added...，可以改成：

echo $_POST['email_subscribe'] . ' is added to the list!';

内容的提问来源于stack exchange，提问作者Jack Maessen