HTML5+Bootstrap+PHP联系表单：实现提交后原地显示感谢消息

嘿，我看了你的代码，其实你已经搭好了AJAX提交的架子，只是几个小细节没处理到位，导致还是跳转到新页面了。咱们一步步调整，就能实现提交后在页面内直接显示感谢消息：

第一步：移除表单的action属性（或设为#） #

你的表单目前保留了action="contact.php"，这会在AJAX没成功阻止默认行为时触发传统提交跳转。把它去掉或者改成action="#"，从根源避免默认跳转：

<form id="contact-form" method="post" role="form">
<!-- 或者写成 action="#" 也可以 -->

第二步：强化AJAX的默认行为阻止逻辑 #

虽然你的JS里有return false;，但最好明确调用e.preventDefault()，确保100%阻止表单的传统提交。同时给AJAX加上错误处理，避免静默失败：

$(function () {

    window.verifyRecaptchaCallback = function (response) {
        $('input[data-recaptcha]').val(response).trigger('change');
    }

    window.expiredRecaptchaCallback = function () {
        $('input[data-recaptcha]').val("").trigger('change');
    }

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        // 先强制阻止默认表单提交行为
        e.preventDefault();
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data) {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                        grecaptcha.reset();
                    }
                },
                // 新增错误处理，网络或服务器出错时给用户提示
                error: function() {
                    $('#contact-form').find('.messages').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>提交失败，请稍后重试</div>');
                }
            });
            return false;
        }
    })
});

第三步：确保PHP返回的JSON格式纯净 #

你的PHP代码已经处理了AJAX请求，但要避免意外输出（比如空格、警告信息）导致JSON解析失败。可以用输出缓冲来确保返回的只有JSON：

<?php
ob_start(); // 开启输出缓冲，捕获所有意外输出

// require ReCaptcha class
require('recaptcha-master/src/autoload.php');

// ... 你的其他PHP代码保持不变 ...

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
} else {
    echo $responseArray['message'];
}

ob_end_clean(); // 清理缓冲，只输出我们需要的内容
?>

第四步：调整消息容器的位置（可选） #

你的HTML里已经有<div class="messages"></div>，目前在表单最上方。如果想让感谢消息显示在提交按钮正下方，可以把这个容器移到提交按钮后面：

<input type="submit" class="button" value="Send message">
<!-- 把messages容器移到这里，消息就会显示在按钮下方 -->
<div class="messages"></div>

这样修改后，用户提交表单时页面不会跳转，而是通过AJAX异步发送数据，成功后在页面内直接显示感谢提示，同时表单会自动重置，reCAPTCHA也会刷新。

内容的提问来源于stack exchange，提问作者FM Careers