사용자가 API에서 아래쪽에 도달하면 자동 스크롤로드가 더 많이 발생합니다.

Question

괜찮습니다. API를 통해 데이터를 가져오고 데이터는 HTML 페이지에 배치되어 사용자가 스크롤 할 수 있도록 배열에 배치됩니다. 모든 것은 작동 중입니다.

나는 이제 처음 10 개의 결과 만 페이지에 넣은 다음 나머지는 자동으로 어레이에서 다시로드 할 수 있는지 알고 싶습니다. 나는 mysql을 가진 사람들을 보았지만 배열로부터 데이터를 얻는 것은 여전히 ​​나를 괴롭 히고있다.

어떤 도움을 환영합니다.

$url = 'API'; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_U`enter code here`RL, $url); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 

curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
$output = curl_exec($ch); 
$info = curl_getinfo($ch); 
curl_close($ch); 


$echo_array = $array['jobs']; 
usort($echo_array, function($a, $b) { 
    return strtotime($a['einsatzstartdatum']) - strtotime($b['einsatzstartdatum']); 
}); 
// print_r($echo_array); 


foreach ($echo_array as $job) 
{ 
    //echo "Id:". $job['ID'] ."\n"; 
    echo "Town:". $job['einsatzort'] ."\n"; 
    echo "stellentitel:". $job['stellentitel'] ."\n"; 
    echo "einsatzstartdatum:". $job['einsatzstartdatum'] ."\n"; 
    echo "bewerbunganlagenbenoetigt:". $job['bewerbunganlagenbenoetigt'] ."\n"."\n"."\n"; 

}; 

Answer 1

그냥 디스플레이에 관한 내용이라면 모든 PHP 행을 포함하는 자바 스크립트 배열에 내용을 넣을 수 있습니다.

스크롤 이벤트가 맨 아래에 도달하면 내용을 업데이트하십시오.

여기 내가 그것에 대해 갈 것입니다 방법에 대한 아이디어를 얻기 위해 만든 작은 예입니다 : (이는 아이디어를 기반으로 염두에 두어야 당신이 한 번에 모든 데이터를로드)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

<script type="text/javascript"> 

    //fill a javascript arr with all your content 
    var dummyContentArr = new Array(); 

    var limit = 10; 

    //just for the example some dummy data 
    for(var i = 0; i < 100; i++) { 
     var dummyContent = 'town: yada ' + i + '"\n"' + 
     'stellentitel: test ' + i + '"\n"' + 
     'einsatzstartdatum: test ' + i + '"\n" ' + 
     'bewerbunganlagenbenoetigt: test ' + i + '"\n"'; 
     dummyContentArr.push(dummyContent); 
    } 

    $(document).ready(function() { 
     displayContent(10); 

     //this scroll event will will update the limit when the scroll bar hits the bottom 
     $('#content').on('scroll', function() { 
      if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
       displayContent(limit); 
       limit += 10; 
      } 
     }); 

    }); 

    //just a simple function thingy to update the content 
    function displayContent(limit) { 
     content = ''; 
     for(i = 0; i < limit; i++) { 
      content += dummyContentArr[i]; 
     } 
     $('#content').html(content); 
    } 
</script> 

<style> 
    #content { 
     background-color: red; 
     height: 200px; 
     width: 200px; 
     overflow-y: scroll; 
    } 
</style> 


<div id="content"></div>