jQuery选项卡：使用AJAX在选项卡处于活动状态时加载数据

Question

这是我的问题：

问题

我使用 jQuery 创建了选项卡，这与 jQueryUI 或 Twitter Bootstraps 的选项卡非常相似。页面上有 3 个标签：“今天”、“本周”、“本月”。当您单击“今天”选项卡时，您将看到今天提交的所有帖子。其他 2 个选项卡的工作方式类似。它正在工作，所有数据都加载了，但我不希望用户等待数据花费太多时间来加载。 （如果每个选项卡下有 10 个帖子，那么页面正在加载 30 个帖子），为了节省他们的时间，我想在特定选项卡处于活动状态时使用 jQuery AJAX 来获取帖子，或者简单地说，当用户点击时在选项卡上，帖子应使用 AJAX 加载。

我在想什么

是的，我知道我可以为此创建 3 个不同的页面，但是当单击 Tab 时，我应该如何使用 AJAX 加载数据？这是我的 HTML（使用 javascript）代码：

<script type="text/javascript">

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

</script>

<ul class="tabs">
    <li><a href="#today">Today</a></li>
    <li><a href="#week">This Week</a></li>
    <li><a href="#month">This Month</a></li>
</ul>

<div class="tab_container">

<div id="today" class="tab_content">
       <!--Load the Content from today.php-->
</div>

<div id="week" class="tab_content">
       <!--Load the Content from week.php-->
</div>

<div id="month" class="tab_content">
       <!--Load the Content from month.php-->
</div>

</div>

更多信息

• 由于我刚开始学习 AJAX，请附上代码以便更好地理解。
• 我正在使用 PHP 和 MySQL。
• 应使用 POST 方法发送数据。
• 请尝试使用 jQuery AJAX。

Answer 1

在我看来，以下修改对你有用。在这种情况下，如果活动选项卡的内容为空，jQuery 会发布到您选择的某个 URL，然后检索从服务器下载的任何 HTML，并将其异步放入活动选项卡中。

您需要更改 $.ajax 调用中的一些参数，但除此之外 - 它应该可以工作。

<script type="text/javascript">

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

        if($(activeTab).html() == '') {
          $.ajax({
            url: '/url/to/post',
            type: 'post',
            dataType: 'html',
            success: function(content) {
              $(activeTab).html(content);
            }
          });
        }

        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

</script>

Answer 2

伙计，这是一个棘手的问题。是否需要通过 AJAX 加载这些数据？如果用户禁用 JS，他将看不到任何东西 o.O

如果我是你，我会先在没有 AJAX 的情况下加载所有数据，然后创建一个间隔来重新加载所有内容，因为我认为数据不会每 5 秒更新一次，所以没有必要每次用户点击时发出请求。

JSON 数据格式会有所帮助，因为您将请求单个页面，然后您可以将结果（在本例中为 3 项：今天、本周、本月）作为单个 JSON 字符串发送，最后打印出来。

PHP页面的JSON响应示例（看json_encode (PHP Manual)）

{
    today:{
        title:'Title',
        content:'Content',
        url:'http://www.site.com/url.php'
    },
    week:{
        title:'Title',
        content:'Content',
        url:'http://www.site.com/url.php'
    },
    month:{
        title:'Title',
        content:'Content',
        url:'http://www.site.com/url.php'
    }
}

jQuery 代码草稿 (jQuery.getJSON())：

// when page loads...
setInterval(function () {
    $.getJSON('getNewPosts.php', function (data) {
        // now you should print each JSON object to it's respective DIV
    }
}, 30000); // 30 seconds