무한 스크롤은 어떻게 이루어 집니까?

Question

스크롤 할 때 항목을 가져 오기 위해 PHP 호출을하는 데 어려움을 겪습니다. 항목이 잠시 동안 반복되어 있고 infinity.php의 PHP 코드가 ID "스트림"에 더 많은 항목을로드해야하지만 솔루션을 파악할 수는 없습니다. 일부 전문 지식 도움에 큰 도움이 될 것입니다! 메인 페이지에

PHP :

<?php 
$getStream = mysql_query("SELECT * FROM ".$DBprefix."xxx WHERE xxx='xxx' AND status='1' ORDER by id"); 

$counter = 0; 
$max = 2; 

while($stream = mysql_fetch_array($getStream) and ($counter < $max)) { 
$counter++; 

    } 
?> 

내가이 jQuery를 가지고 :

function lastAddedLiveFunc() 
{ 
    $('div#loader').fadeIn(); 

    $.get("infinity.php", function(data){ 
     if (data != "") { 
      //console.log('add data..'); 
      $("#stream").append(data); 
     } 
     $('div#loader').empty(); 
    }); 
}; 

HTML :

<div id='stream'></div> 

Answer 1

난 당신이 여기에 몇 가지 주요 부분을 놓치고있어 생각합니다. 먼저, infinte 스크롤을 사용하고 데이터베이스에서 데이터를 가져 오는 경우 LIMIT 절이 필요하고 LIMIT 절을 사용하면 offset, total 관계가 허용됩니다. 여기서 offset은 시작할 행을 나타내고 total은 우리가 원하는 행 수입니다.

처음에는 위의이

$offset = $_GET['offset'] ? $_GET['offset'] : 0; //start at 0th row if no variable set 
$total = $_GET['total'] ? $_GET['total'] : 20; // get 20 rows if no variable set 

뭔가를해야합니다, 우리는 인수가 우리에게 전달되는 경우하지 않을 경우, 우리는 기본값을 사용, 확인 원 변수 할당을 사용하고 값. 우리는 mysqli와 prepared, bind_param, execute, bind_result 및 fetch_assoc() 메소드를 사용할 것이다.

if($getStream = $mysqli->prepare("SELECT * FROM ? WHERE xxx=? AND status=? ORDER by id LIMIT ?,?"): 

    $ret = ''; // a variable place holder 

    // in the above statement, fill in the ?'s 
    // the actual ? will be the value we wish to return, in order from first to last. 
    $getStream->bind_param('ssddd', $DBprefix.'xxx', 'xxx', 1, $offset, $total); 

    //execute our query 
    $getStream->execute(); 

    $getStream->bind_result($field1, $field2, $field3, $field4); // each field needs it's own variable name, that way we can access them later. 

    while($row = $getStream->fetch_assoc()): 
     $ret .= '<div class="my-infinite-element"><h3>'. $field1 .'</h3><p>'. $field2.'</p>'. $field3 .', '. $field4 .'</div>'; 
    endwhile; 

    echo $ret; 

else: 
    return FALSE; 
endif; 

이제 우리는 MySQLI를 사용하여 데이터를 다시 처리하는 방법을 설명합니다. 이제 아약스 선언문을 만들어 데이터를 다시 가져 오자. 위에서

$.ajax({ 
    type: 'GET', 
    url : 'infinity.php', 
    data: { 
     'offset' : $('.my-infinite-elements').length, 
     'total' : 20 
    }, 
    success: function(data){ 
     if(false !== data){ 
      $('#stream').append(data); 
     } 
    } 
}); 

는 우리가 걱정해야 할 유일한 것은 $('.my-infinite-elements').length입니다. 우리가 반환 한 각 요소에 대해 my-infinite-elements 클래스를 사용했습니다. 이 방법으로 페이지의 기존 요소 길이를 계산할 수 있습니다.이 값은 offset 값 (또는 행 가져 오기 시작 위치)을 제공합니다. DB에서 20 개의 결과를 추출하면 0을 기준으로하므로 0-19가됩니다. .length을 수행하면 1 based 결과를 얻게되며, 이는 결국 0 대신에 20을 반환하게됩니다. 마지막 행이 반환되기를 원하지 않기 때문에 괜찮습니다. 따라서 논리는 괜찮습니다. 우리의 ajax 함수에있는 두 변수 offset/total은 우리의 삼항 변수 할당에 해당합니다.