jQuery 选项卡式 Ajax 内容


jQuery Tabbed Ajax content

所以我需要用查询制作 3 个选项卡(把这部分放下来),但它们中的每一个都需要通过 Ajax 请求检索可过滤的数据。基本上,页面在左侧设置了一个静态div,其中包含过滤器,然后在右侧,选项卡会根据您选择的选项卡而变化。

我只是想知道抓取 ajax 内容并将其放入每个选项卡中的最佳方法是什么?

我希望我把我的问题说清楚了。

如果我正确理解您的问题,这应该非常简单。例如,假设您想检索一个静态网页,只需将该网页的所有内容插入到您的容器div 中......

$('#tab1').click(function(){
    //Fetch a webpage (via GET) and load into 'result'
    $.get('/path/to/stuff.htm',function(result){
        //Replace content of container with result
        $('#containerDiv').html(result);
    });
});

就这么简单。如果您需要结果的一部分(例如从XMLRPC请求中提取CDATA),那么您可以简单地将结果加载为jQuery对象,找到该元素,然后加载该元素...这样。。。

$('#tab1').click(function(){
    //Fetch a webpage (via GET) and load into 'result'
    $.get('/path/to/stuff.htm',function(result){
        //Make result a jQuery obj
        result = $(result);
        //Replace content of container with result
        $('#containerDiv').html(result.find('mycdata').text());
    });
});

我还应该注意 - 如果你有一个包装在 CDATA 中的 XML 结果,即使你把它作为 html 插入,也总是把它读作 .text()。如果结果未包装在 CDATA 中,请将其读取为 .html()。

更新:如果您需要向服务器发送额外的数据(例如对 ASC 或 DESC 进行排序),您可以这样做......

$('#tab1').click(function(){
    //Fetch a webpage (via GET) and load into 'result'
    $.get(
        '/path/to/service', 
        { sort:'ASC', startDate:'2012-04-01', endDate:'2012-04-08'}, 
        function(result){
            //Replace content of container with result
            $('#containerDiv').html(result);
        }
    );
});