jQuery UI选项卡：JSON未显示

Question

我正在使用带有ajax的jquery ui选项卡。

Ajax将面对这样的JSON内容。

[
  {
    "title"   :"a note",
    "type"    :"text",
    "content" :"MY FIRST NOTE!"
  },
  {
    "title"   :"two note",
    "type"    :"text",
    "content" :"MY FIRST NOTE <b>if html works<\/b> i should pay attention to this!"
  }
]

我正在使用以下代码：

$(function() {
    $("#tabs").tabs({
        cache : false,
        ajaxOptions : {
            cache : false,
            dataType : 'json',
            dataFilter : function(result) {
                var data = $.parseJSON(result);
                return data;
            },
            error : function(xhr, status, index, anchor) {
                $(" anchor.hash ").html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
            }
        }
    });
});

(我看到了这个问题在StackOverflow上)

JSON文件（由php生成）已正确加载，并且使用JSONLint进行了验证，但选项卡仍保持白色，并且内容未加载，你能帮助我吗？

这是我第一次处理JSON和Ajax，所以如果我犯了一些愚蠢的错误，请原谅。

编辑：json内容使用content type = application / json发送，去除content type后它会显示json，但我想使用jquery解析json文件，这可能吗？

- Matteo Pagliazzi

---

你尝试过使用 return data.content 而不是 return data 吗？ - Suave Nti

Answer 1

我认为你不应该调用$.parseJSON(result);，因为你已经指定了dataType : 'json'（查看我的答案，解释为什么'jQuery.parseJSON'是不必要的：Why is 'jQuery.parseJSON' not necessary?），所以jQuery会为你解析响应。根据另一个示例，你也应该返回

       dataFilter : function(result) {
            var data = $.parseJSON(result);
            return data.content;
        },

编辑 - 添加 dataType: 'json' 后，这应该没问题了。

       dataFilter : function(result) {
            return result.content;
        },

- Nicola Peluchetti

---

@MatteoPagliazzi 是的，但你应该让 dataType: 'json' 并且只需 return result.content 我已经将其添加到我的答案中。 - Nicola Peluchetti

@MatteoPagliazzi 这很奇怪，不过最重要的是它能工作。 - Nicola Peluchetti

Answer 2

由于这部分原因，选项卡中的内容未能正确加载：

dataType : 'json',
dataFilter : function(result) {
    var data = $.parseJSON(result);
    return data;
}

你会收到以json格式的数据，因此 result 是JavaScript对象。但是 $.parseJSON() 需要字符串而不是对象 (请看文档)。当你设置 dataType : 'html' 时它可以正常运行，因为使用这个设置，数据是以文本形式返回。

为了解决这个问题，你可以将 dataType : 'html' 设置或者去掉 dataFilter 部分。当你请求 json 格式数据时，jQuery 内部调用了$.parseJSON()。 更新： 为什么 $.parseJSON() 没有出现任何错误的另一个信息是 - 自 jQuery 1.4 以来，如果 JSON 文件包含语法错误，则该请求通常会无声地失败。(也看一下文档)

- BartekR

Answer 3

我发现在beforeLoad处理程序中返回false并从beforeLoad处理程序内部发送一个getJSON请求更为简单。请参见我的答案这里。

- DavidHyogo