将 JSON 编码的 AJAX 内容加载到 jQuery UI 选项卡中答案

【问题标题】：Loading JSON-encoded AJAX content into jQuery UI tabs将 JSON 编码的 AJAX 内容加载到 jQuery UI 选项卡中
【发布时间】：2010-05-07 01:06:33
【问题描述】：

我们希望我们的网络应用程序中的所有 AJAX 调用都能接收 JSON 编码的内容。在大多数地方，这已经完成（例如在模态中）并且工作正常。

但是，当使用 jQueryUI 的选项卡 (http://jqueryui.com/demos/tabs/) 和它们的 ajax 功能时，只能返回纯文本 HTML（即从下面的 a 标签中指定的 URL）。如何让选项卡功能识别在每个选项卡单击时，它将从指定的 URL 接收 JSON 编码的数据，并加载到该 JSON 的 .content 索引中？

$(function() {
    $('div#myTabs').tabs();     
});

<div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="/url/one">Tab one</a></li>
        <li class="ui-state-default ui-corner-top"><a href="/url/two">Tab two</a></li>
    </ul>
</div>

【问题讨论】：

你能使用 load() 事件吗？
这个解决方案对您有用吗？它似乎对我不起作用。

标签： jquery json jquery-ui jquery-ui-tabs

【解决方案1】：

您可以使用 ajax 调用的 dataFilter 选项将您的 json 响应转换为要插入到选项卡面板中的 html。

类似这样的：

$('#mytabs').tabs({
    ajaxOptions: {
        dataFilter: function(result){
            var data = $.parseJSON(result);
            return data.myhtml;
        }
    },
});

如果您的 JSON 响应如下所示：

{"myhtml":"<h1>hello<\/h1>"}

【讨论】：

【解决方案2】：

我必须补充：

this.dataTypes=['html']

让这个工作。

在上下文中：

      ,ajaxOptions: {
    dataFilter: function(result,type){
      var data = $.parseJSON(result);
       // Trick jquery to think that it's html
       this.dataTypes=['html']
       return '<p>'+data.credential.id+'</p>';
    }
    ,error: function( xhr, status, index, anchor ) {
      $( anchor.hash ).html( i18n.AJAXError + ' (' + status + ')' );
    }
  }

【讨论】：

我也遇到了同样的问题。添加 dataTypes 分配也对我有用。

【解决方案3】：

我最近遇到了这个问题，所以以防万一有人最近一直在寻求此类问题的帮助，我认为重新打开此讨论会很有用。我正在使用 jQuery 1.8.2 和 jQuery UI 1.9.2。我发现使用最新版本的 jQuery UI 执行此操作的最佳方法是从 beforeLoad 事件处理程序返回 false 并使用相关选项卡中指定的 URL 发送 getJSON 请求。

HTML 标记：

    <div id="tabs">

        <ul>
            <li><a href="/json/tab1.json">Tab 1</a></li>
            <li><a href="/json/tab2.json">Tab 2</a></li>
            <li><a href="/json/tab3.json">Tab 3</a></li>
        </ul>

    <div>

标签调用代码：

    $(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                var url = ui.ajaxSettings.url;
                $.getJSON(url, function (data) {
                    ui.panel.html(data.text);
                });
                return false;
            }
        });
    });

当beforeLoad 处理程序返回false 时，显示从选项卡中定义的URL 检索到的HTML 的正常功能被禁用。但是，您仍然可以访问传递给 beforeLoad 处理程序的 event 和 ui 对象。您可以使用此语法 ui.ajaxSettings.url 从选项卡中获取 URL，然后显示 getJSON 请求返回的数据，如 Content via Ajax 示例所示：

ui.panel.html(data.text);

在我的例子中，它是 data.text，因为我正在检索的 JSON 包含两个属性 header 和 text。

【讨论】：