Question

我完全有能力加载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返回？

Answer 1

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

这是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事件处理程序（参见tabs -> event: beforeLoad）中将自定义转换器函数连接到ajax调用，这将a）执行JSON解析并且b）调用renderList函数。这将使load的{{1}}事件过时。

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

jQueryUI和tabs的json内容呈现

1 个答案: