AJAX 响应显示不正确？修复浏览器错误消息的全面指南

php

2024-03-03 13:03:40

正确显示 AJAX 响应：修复浏览器显示错误消息的问题

概述

在使用 AJAX 提交表单时，浏览器错误地显示 JSON 格式的错误消息，而不是预期的成功消息。本文将深入探讨这一问题，并提供分步解决方案，以确保 AJAX 响应在页面上正确显示。

问题根源

出现此问题的常见原因有：

JSON 响应格式不正确
AJAX 成功回调未正确解析 JSON 响应

解决方案

要解决此问题，请遵循以下步骤：

确保 JSON 响应格式正确

服务器端代码返回的 JSON 响应应包含以下属性：

success：布尔值，表示操作是否成功
message：包含成功或错误消息的字符串

正确解析 JSON 响应

在 AJAX 成功回调中，使用 JSON.parse() 方法解析响应，将其转换为 JavaScript 对象。不要直接显示响应文本。

示例代码

以下是修复后的 PHP 服务器端代码和 jQuery AJAX 回调：

// ... 现有代码

header('Content-Type: application/json');
echo json_encode(['success' => true, 'message' => '您的消息已发送。谢谢！']);

// ... 现有代码

$(document).ready(function() {
    $('.php-email-form').on('submit', function(e) {
        e.preventDefault();

        var formData = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: 'forms/contact.php',
            data: formData,
            dataType: 'json',
            success: function(response) {
                var data = JSON.parse(response);

                if (data.success) {
                    $('.error-message').hide();
                    $('.sent-message').text(data.message).show();
                } else {
                    $('.sent-message').hide();
                    $('.error-message').text(data.message).show();
                }
                $('.loading').hide();
            },
            error: function() {
                $('.loading').hide();
                $('.sent-message').hide();
                $('.error-message').text('发生错误。请稍后重试。').show();
            }
        });
    });
});