jquery ajax - 处理 2 种不同的响应类型

Question

我正在开发一个应用程序 (jquery 3.2.1)，其中进行 ajax 调用可能会导致以下情况之一发生 - 只要服务器提供 HTTP 200 OK 响应：

1. 返回 HTML。这是期望的结果，因为它是对有效请求的“内容”响应。

2. 如果存在基于请求数据的验证错误，则返回 JSON 错误。

我的 ajax 代码如下所示：

$.ajax({
  url: $('#searchRegulations').attr('action'),
  type: 'post',
  cache: false,
  data: $('#searchRegulations').serialize()
}).done(function (response) {
    if (response) {
      // Display response (point 1)
      $('main .content').hide();
      $('#ajaxContent').html(response).show();
      return false;
    } else {
        // Handle JSON error (point 2)    
    }
});

正如我在上面的 cmets 中提到的，如果发生情况 1（返回 HTML），那么我将其写入#ajaxContent。没关系。

但是对于情况 2，我该怎么办？如果我添加以下代码：

// Handle JSON error (point 2)  
$('main .content').hide();
$('#ajaxContent').html(response).show();

#ajaxContent 里面没有写任何东西。

这是因为没有返回 HTML 吗？

每个响应标头都不同：

1. Content-Type: text/html; charset=UTF-8

2. Content-Type: application/json; charset=UTF-8

我在 jquery ajax documentation 上查看了 dataType，但不确定这是否相关，因为根据结果我实际上收到了 2 个单独的 Content-Type。

在场景 2 中返回 JSON 的原因是因为有一些代码（未显示）可以在每个字段下方写入错误消息，例如

`{rf_keywords: {length: "Search keywords must under 1500 characters in length."}}`

所以 HTML 更适合情况 1，而 JSON 更适合情况 2。

有人可以建议吗？

Answer 1

正如您所观察到的，在案例 #2 中您会收到 json 格式的响应。当您的代码被传递response 参数时，这应该已经被解析了。使用JSON.stringify 再次将其转换为字符串，您将能够在 html 代码中显示它：

$('#ajaxContent').html(JSON.stringify(response)).show();

请注意，这不是一个漂亮的视图，因为 JSON 结构未转换为等效的 html 子树。

查看this fiddle 以查看完整示例。

有一些库可以将 JSON 结构转换为交互式 html，例如。 JSTree（对于您的用例可能有点矫枉过正）。

Answer 2

好的，我正在回答我自己的问题。

这里真正的问题是：有没有办法在.done()内部判断响应类型是HTML还是JSON

是的，有。记录在这里：jquery how to check response type for ajax call

所以我最终的 ajax 代码如下所示：

$.ajax({
    url: $('#searchRegulations').attr('action'),
    type: 'post',
    cache: false,
    data: $('#searchRegulations').serialize()
 }).done(function (response, status, xhr) {

            // The ajax handler can return either HTML or JSON. So we need to know what's been returned.
            var ct = xhr.getResponseHeader("content-type") || "";

            // HTML response == content to display. No validation error.
            if (ct.indexOf('html') > -1) {
                if (response) {
                    $('main .content').hide();
                    $('#ajaxContent').html(response).show();
                    return false;
                }
            }
            // JSON response. Validation error(s) occurred.
            if (ct.indexOf('json') > -1) {
                $.each(response, function(i, v) {
                    $.each(v, function(k, m) {
                         var msg = '<span class="help-block">'+m+'</span>';
                         $('input[name="' + i + '"]').parent().after(msg);
                         $('input[name="' + i + '"]').closest('.form-group').addClass('has-error');
                    });
                });
            }  
});

这样做意味着您可以检查是否返回了 HTML - 在这种情况下，将其显示在 #ajaxContent 中。如果发生错误并从 ajax 脚本返回 JSON，则可以根据返回的 JSON 在适当的表单字段下写入错误消息。