问题

Question

这是我的问题：

问题

我使用jQuery创建了Tabs，这与jQueryUI或Twitter Bootstraps的Tabs非常相似。页面上有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 POST到您选择的某个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个项目：today，thisWeek，thisMonth）作为单个JSON字符串发送，最后将其打印出来。 / p>

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

jQuery选项卡：使用AJAX激活Tab时加载数据

问题

我在想什么

更多信息

2 个答案: