我们希望 Web 应用程序中的所有 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>
最佳答案
您可以使用 ajax 调用的 dataFilter 选项将 json 响应转换为要插入到选项卡面板中的 html。
类似这样的事情:
$('#mytabs').tabs({
ajaxOptions: {
dataFilter: function(result){
var data = $.parseJSON(result);
return data.myhtml;
}
},
});
如果您的 JSON 响应如下所示:
{"myhtml":"<h1>hello<\/h1>"}
关于jquery - 将 JSON 编码的 AJAX 内容加载到 jQuery UI 选项卡中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2785548/