如何显示对AJAX/getJSON请求的错误(text/html)响应？

显示AJAX/getJSON请求的错误响应

基础概念

AJAX (Asynchronous JavaScript and XML) 是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。getJSON是jQuery提供的一个简化方法，专门用于获取JSON数据。

错误处理机制

当AJAX或getJSON请求失败时，服务器通常会返回错误响应，这些响应可能是JSON格式，也可能是HTML或纯文本格式(text/html)。正确处理这些错误响应对于提供良好的用户体验至关重要。

解决方案

1. 使用jQuery的AJAX方法

$.ajax({
    url: 'your-api-endpoint',
    dataType: 'json', // 期望返回JSON
    success: function(data) {
        // 处理成功响应
    },
    error: function(xhr, status, error) {
        // 错误处理
        if (xhr.responseText) {
            // 显示错误响应内容
            console.error('Error response:', xhr.responseText);
            // 或者显示给用户
            $('#error-message').html(xhr.responseText);
        }
    }
});

2. 使用getJSON方法

$.getJSON('your-api-endpoint')
    .done(function(data) {
        // 处理成功响应
    })
    .fail(function(xhr, status, error) {
        // 错误处理
        if (xhr.responseText) {
            console.error('Error response:', xhr.responseText);
            $('#error-message').html(xhr.responseText);
        }
    });

3. 使用fetch API (现代JavaScript)

fetch('your-api-endpoint')
    .then(response => {
        if (!response.ok) {
            return response.text().then(text => {
                throw new Error(text);
            });
        }
        return response.json();
    })
    .then(data => {
        // 处理成功响应
    })
    .catch(error => {
        console.error('Error:', error.message);
        $('#error-message').html(error.message);
    });