непрерывная прокрутка. AJAX, PHP, JAVASCRIPT, MYSQL

Я фактически создаю форум. Таким образом, был бы «порядок по» выпадающим полем, т. Е. Тег select в html. Где пользователь выбирает любой порядок, например, по времени или тому подобное, и т. Д. Вызывается функция ajax, которая динамически выводит содержимое на страницу из базы данных mysql.

Выберите меню

<select name="orderby" onchange="showposts(this.value)"> <option value="1" selected>By Time</option> <option value="2">By Genuine Count</option> <option value="3">By Dubious Count</option> </select> 

функция showposts

 function showposts(str){ orderby=str; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("postsdiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","showposts.php?q="+str,true); xmlhttp.send(); } 

Страница Showposts.php

 $sql = "SELECT * FROM posts order by date desc "; $result = $connection->query($sql); $username=$_SESSION['username']; while($row = $result->fetch_assoc()) { echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >"; echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >"; echo "-----------------------------------</br>"; echo "-----------------------------------</br>"; echo "Posted By: ".$row['user']."&nbsp&nbsp&nbsp&nbsp"; echo "Time: ".$row['date']."</br>"; echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine']."; echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>"; echo "</br>------------------------ </br>"; echo "Subject: ".$row['subject']."</br>"; echo "Post: ".$row['post'].'<br />'; 

}

Проблема. Итак, проблема здесь заключается в том, что я хочу использовать параметр непрерывной прокрутки, такой как тот, который используется в facebook. Все библиотеки javascripts и jquery, которые я видел, использовали логику, когда пользователь прокручивается до страницы, javascript затем помещает некоторый контент после этого. Но здесь я запускаю цикл while, который одновременно приводит данные из базы данных. Таким образом, я не смог реализовать код javascript. Итак, есть ли что-то, что я мог бы сделать для достижения непрерывного прокрутки, например, есть ли возможность разбить цикл while или получить целые данные и отобразить часть по частям или что-то в этом роде?

javascript для прокрутки

 function yhandler(){ var wrap=document.getElementById('postsdiv'); var contentheight=wrap.offsetHeight; var yoffset=window.pageYOffset; var y=yoffset+window.innerHeight; if(y>=contentheight){ showposts(); } } window.onscroll=yhandler(); 

Используйте класс PDO, встроенный в php, и запрос из базы данных вернет все строки в виде массива объектов stdclass. Затем используйте PDOStatement :: fetchObject () для циклического перемещения массива

Когда вы извлекаете данные с сервера с помощью JavaScript, почему бы вам не поместить представление с помощью JavaScript вместо PHP.

Попробуйте использовать Asynchronous Javascript Call (AJAX) вместо XMLHttpRequest. Это поможет вам загружать данные асинхронно, что означает, что даже если сервер, пришедший на следующий сервер, получит время, вы все равно можете выполнить другие коды JavaScript.

С реализованным AJAX, скажем, вы хотите получить 10 сообщений за один раз, а после получения первых 10 сообщений вы можете распечатать данные для этих 10 с помощью JavaScript и одновременно сделать звонок еще на 10.

Подготовьте функцию successCallBack, где вы проанализируете полученные данные и поместите их, как требуется для вашего HTML. Вам нужно будет добавить сообщения, так что, когда следующий AJAX вернет результат, который будет добавлен после последнего сообщения.

http://www.jquery4u.com/demos/ajax/

Вы должны изучить MySQL LIMIT . Предельная функция принимает 2 входных переменных, начало и длину. С помощью этих двух переменных вы можете создать пейджинговую систему; что могло бы пойти на что-то вроде:

функция showposts

 //Add a global variable to save the current page: var currentPage = 0; var currentType = 0; function showposts(str){ //ALL PREVIOUS CODE, UNCHANGED xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("postsdiv").innerHTML+=xmlhttp.responseText; } } if(str != undefined){ currentType = str; //save the current type for later use document.getElementById("postsdiv").innerHTML = ""; } xmlhttp.open("GET","showposts.php?q="+currentType+"&p="+currentPage,true); xmlhttp.send(); } 

Страница Showposts.php

 <?php $currentPage = intval($_GET['p']); $numPerPage = 30; //change this to the number of items you want each page $sql = "SELECT * FROM posts order by date desc LIMIT ".($currentPage * $numPerPage).", ".$numPerPage; $result = $connection->query($sql); $username=$_SESSION['username']; while($row = $result->fetch_assoc()) { echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >"; echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >"; echo "-----------------------------------</br>"; echo "-----------------------------------</br>"; echo "Posted By: ".$row['user']."&nbsp&nbsp&nbsp&nbsp"; echo "Time: ".$row['date']."</br>"; echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine']."</span>"; echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>"; echo "</br>------------------------ </br>"; echo "Subject: ".$row['subject']."</br>"; echo "Post: ".$row['post'].'<br />'; } ?> 

Теперь вам нужно определить, когда пользователь прокручивается в нижней части страницы, а затем вызвать следующую функцию:

 function nextPage(){ currentPage++; showposts(); }