0

我完全有能力加载 json 返回的数据（在我的 html 页面中显示为“原样”），但是我似乎无法使原始 json 数据消失。我使用了以下代码：

$( "#tavole" ).tabs({
    cache : false,
    event: "mouseover",
    ajaxOptions : {
        cache : false,
        dataType : 'json'
    },
    beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
            ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." );
        });
    },
    load: function (event, ui ) {
        renderList(JSON.parse($(ui.panel).text()));
    }
});

上面的代码工作正常并且 renderList 被执行，但是无论如何原始 json 返回出现在选项卡面板中。我如何让它消失，以便只显示已处理的 jquery 对象？

这是我的html：

<div id="tavole">
    <ul>
        <li><a href="#tavole-1"><span class="ui-icon ui-icon-locked"></span>alfa</a></li>
        <li><a href="#tavole-2"><span class="ui-icon ui-icon-person"></span>beta</a></li>
        <li><a href="/api/products"><span class="ui-icon ui-icon-cart"></span>gamma</a></li>

所以换句话说，我/api/products在选项卡的面板中获得了一次显示的返回，并通过 renderList 函数获得了第二次。

我如何才能只看到渲染的显示？为什么我还看到原始 json 从返回/api/products？

4

1 回答 1

0

我如何才能只看到渲染的显示？为什么我还看到从 /api/products 返回的原始 json？

这是 ajax 初始化选项卡背后的想法，小部件将简单地显示 ajax 调用返回的内容。

您可以让服务器渲染一个实际的 HTML 片段，或者让 renderList 返回其结果而不是与 DOM 本身交互，这将使您有机会：

load: function (event, ui ) {
    var $panel = $(ui.panel)
    var myHtml = renderList(JSON.parse($panel.text()));
    $panel.html(myHtml);
}

不过，您最好的选择是为您的 ajax 调用编写一个自定义转换器函数。现在，您正在为您的 ajax 结果使用“json”转换器，默认为JSON.parse. 查看jQuery.ajax()的文档，部分converters。beforeLoad应该可以在选项卡的事件处理程序中将自定义转换器函数连接到您的 ajax 调用（请参阅选项卡 -> 事件： beforeLoad），这将 a）进行 JSON 解析和 b）调用您的 renderList 函数。这将使load您的事件tabs过时。

后一个版本当然是最复杂的版本，但是（虽然我自己没有做过）我也发现它是最干净的方法。

于 2013-10-10T08:19:52.327 回答