jQuery를 탭 : 데이터로드 탭 여기 내 문제가 AJAX

Question

을 사용하여 Active입니다 :

문제점

내가 jQueryUI이나 트위터 부트 스트랩의 탭의 그것과 매우 유사하다 jQuery를 사용하여 탭을 만들었습니다. 페이지에는 3 개의 탭이 있습니다 : "오늘", "이번 주", "이번 달". '오늘'탭을 클릭하면 오늘 제출 된 모든 게시물을 볼 수 있습니다. 다른 두 개의 탭도 비슷하게 작동합니다. 작동 중입니다. 모든 데이터가로드되지만 사용자가 데이터를로드하는 데 너무 많은 시간이 소요될 때까지 기다리지 않아도됩니다. (각 탭 아래에 10 개의 게시물이있는 경우 페이지에 30 개의 게시물이로드됩니다.) 시간을 절약하기 위해 jQuery AJAX를 사용하여 특정 탭이 활성 상태 일 때 게시물을 가져 오거나 간단한 단어로 사용자가 탭에서 AJAX를 사용하여 게시물을로드해야합니다.

내가

을 생각하고 무엇 예, 나는 그것에 대해 3 개의 다른 페이지를 만들 수 있습니다 알고 있지만 탭을 클릭 할 때 어떻게 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 
     $(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를 배우기 시작으로 더 나은 이해를위한 코드를 기입하십시오 : 여기에 (자바 스크립트 포함) 내 HTML 코드입니다.
• 저는 PHP와 MySQL을 사용하고 있습니다.
• 데이터는 POST 방법을 사용하여 보내야합니다.
• jQuery AJAX를 사용해보세요.

Answer 1

다음과 같은 수정이 도움이 될 것 같습니다. 이 시나리오에서 jQuery는 활성 탭의 컨텐츠가 비어있는 경우 선택한 일부 URL로 POST 한 후 서버에서 오는 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를 사용할 수 없게되면 아무 것도 보지 않습니다.

내가 너라면 나는 데이터가 업데이트되지 않을 것이므로 모든 것을 다시로드하기 위해 AJAX없이 모든 데이터를로드 한 다음 모든 것을 다시로드 할 것입니다. 예를 들어 매 5 초마다 사용자가 클릭 할 때마다 요청할 필요가 없습니다.

JSON 데이터 형식은 단일 페이지를 요청한 다음 단일 JSON 문자열로 결과 (이 경우 3 항목 : 오늘, thisWeek, thisMonth)를 보내고 마지막으로 인쇄 할 수 있기 때문에 도움이 될 수 있습니다. PHP는 페이지의 JSON 응답의

예

{ 
    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()) (json_encode (PHP Manual) 살펴 보라) :

// 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