jQuery的標籤：當標籤處於活動狀態使用AJAX

Question

這裏是我的問題加載數據：

的問題

我已經使用jQuery，這是非常相似jQueryUI的或Twitter的白手起家的標籤上創建標籤。頁面上有3個選項卡：「今日」，「本週」，「本月」。當你點擊「今日」標籤時，你會看到今天提交的所有帖子。和其他2個標籤類似地工作。它正在工作，所有的數據加載，但我不希望用戶等待數據花費這麼多時間來加載。 （如果每個標籤下有10個帖子，那麼這個頁面會加載30個帖子），爲了節省時間，我想用jQuery AJAX在特定標籤處於活動狀態時獲取帖子，或者用簡單的話說，當用戶點擊時在標籤上，帖子應該使用AJAX加載。

我在想什麼

是的，我知道我可以創建爲3個不同的網頁，但使用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，他將不會看到任何東西oo

如果我是你，我會首先加載所有沒有AJAX的數據，然後創建一個間隔來重新加載所有東西，因爲我認爲數據不會被更新例如每5秒鐘一次，因此每次用戶點擊時都不需要提出請求。

JSON數據格式可以提供幫助，因爲您會請求一個頁面，然後您可以將結果（本例中爲3個項目：today，thisWeek，thisMon）作爲單個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