Ajax联系表单问题：无法显示提交成功/失败提示

Hey there! Let's figure out why your PHP+Ajax contact form isn't showing success/failure messages even though emails are sending. Based on the partial JS code you shared, here are the key fixes and checks to resolve this:

Your current code cuts off at success: function(da... — first, you need to finish this logic, and add an error callback (critical for catching issues like invalid JSON or server errors). Here's a polished version:

// Make sure you're targeting the right submit element (use an ID or type selector)
$('button[type="submit"]').on("click", function(e){
    e.preventDefault();
    const form = $(this).closest('form'); // Safely grab the parent form
    const formData = form.serialize();
    
    $.ajax({
        type : 'POST',
        url : form.attr('action'),
        data : formData,
        dataType : 'json',
        success: function(data) {
            // Assume your backend returns {status: 'success/error', message: '...'}
            const messageContainer = $('#form-message');
            if(data.status === 'success') {
                messageContainer.html('<div class="success-alert">'+data.message+'</div>');
                form[0].reset(); // Optional: Clear the form after success
            } else {
                messageContainer.html('<div class="error-alert">'+data.message+'</div>');
            }
        },
        error: function(xhr, status, error) {
            // Handle cases where the request fails (e.g., invalid JSON, server crash)
            $('#form-message').html('<div class="error-alert">提交失败，请稍后重试</div>');
            // Print debug info to console (for your dev work only)
            console.log('Ajax Error:', status, error);
            console.log('Server Response:', xhr.responseText);
        }
    });
});

Pro tip: Double-check that the form variable is defined properly — if you skip this, form.serialize() will throw a JS error and break everything.

Since you set dataType: 'json', jQuery expects a valid JSON response from your PHP script. If it gets HTML, plain text, or malformed JSON, the success callback won't fire. Here's how to fix your PHP:

// After handling the mail() function
if(mail($to, $subject, $message, $headers)) {
    // Set the correct content type header
    header('Content-Type: application/json');
    // Return success data as JSON
    echo json_encode([
        'status' => 'success',
        'message' => '消息发送成功！我们会尽快回复您。'
    ]);
    exit; // Stop execution after sending JSON
} else {
    header('Content-Type: application/json');
    http_response_code(500); // Optional: Send an error status code
    echo json_encode([
        'status' => 'error',
        'message' => '邮件发送失败，请稍后再试。'
    ]);
    exit;
}

Important: Make sure there are no extra spaces, echoes, or HTML output before the header() call — even a single space will break the JSON response.

Open your browser's DevTools (F12) and go to the Console tab. Look for:

• Uncaught errors (e.g., "form is not defined" means you didn't select the form correctly)
• JSON parsing errors (looks like SyntaxError: Unexpected token < in JSON at position 0 — this means your PHP is returning HTML instead of JSON)
• Missing element errors (if $('#form-message') doesn't exist in your HTML)

You need a dedicated element on your page to display the success/error messages. Add this somewhere near your form:

<form id="contact-form" action="send-mail.php" method="POST">
    <!-- Your form fields here -->
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">发送</button>
</form>
<!-- Message container -->
<div id="form-message"></div>

Use a tool like Postman, or even just submit the form with JS disabled, to check what your PHP script returns. If it outputs a clean JSON object like {"status":"success","message":"..."}, you're good. If it returns an error page or plain text, fix your PHP first.

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