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