Вопрос по поводу ajax добавления новых записей на страницу при скроллинге и клике?

Question

[kr_ilya]

Делаю ajax добавление записей на страницу при скроллиге и столкнулся с проблемой как выводить эти записи.
Вот страница, на которую добавляются записи:

<?
$asql = 'SELECT * FROM Projects ORDER BY vip DESC, Date_Add DESC LIMIT ?';
$aarr = array(5);
$stat = $db->fetch_assoc_array($asql, $aarr);
foreach($stat as $Row ){
$system = $row['Systems'];
?>        
        
        <!-- Row -->
        <div class="row">
    //Здесь структура записи
        </div>  
<?}?>
  <button class="more">Показать больше</button>

Вот недописаный ajax

/***** AutoLoad *****/
$(document).ready(function(){
    
    var inProgress = false;
    var startFrom = 10;
    
    $('.more').click(function(){
        if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress){
            
            $.ajax({
                url: "/api/autoload.php",
                method: "POST",
                data: {"startFrom" : startFrom},
                beforeSend: function(){
                    inProgress = true;
                },
                error: function(jqXHR, exception) {
				if (jqXHR.status === 0) {
				alert('Not connect.\n Verify Network.');
				} else if (jqXHR.status == 404) {
				alert('Requested page not found. [404]');
				} else if (jqXHR.status == 500) {
				alert('Internal Server Error [500].');
				} else if (exception === 'parsererror') {
				alert('Requested JSON parse failed.');
				} else if (exception === 'timeout') {
				alert('Time out error.');
				} else if (exception === 'abort') {
				alert('Ajax request aborted.');
				} else {
				alert('Uncaught Error.\n' + jqXHR.responseText);
				}
			}
                    
            })
            .done(function(stat){
                stat = jQuery.parseJSON(stat);
                	//здесь вывод
                    inProgress = false;
                    startFrom += 10;
                });
        }   
    });
});

Вот обработчик

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
function __autoload($name){ include($_SERVER['DOCUMENT_ROOT']."/classes/_new.".$name.".php");}
$func = new func();
$config = new config;
$db = new db($config);
$startFrom = $_POST['startFrom'];
 
$asql = 'SELECT * FROM Projects ORDER BY vip DESC, Date_Add DESC LIMIT ?, ?';
$aarr = array($startFrom, 5);
$stat = $db->fetch_assoc_array($asql, $aarr);


echo json_encode($stat);
?>

Не могу понять как выводить эти записи в цикле. Спасибо.

Answer 1

[Антон Шаманов]

Вариантов масса, я например в последнее время активно использую https://blueimp.github.io/JavaScript-Templates/ , создается шаблон для записи (допустим товара в каталоге) и циклом передаем/выводим записи.

Comments

[Антон Шаманов]

Либо можно воспользоваться php шаблонизатором https://github.com/fenom-template/fenom и возвращаться ajax'ом уже сгенерированный html.
Вообще стоит почитать про MVC для общего понимания.

[kr_ilya]

Антон Шаманов, решил воспользоваться Вашим советом. У меня возникли некоторые вопросы. Можно ли вынести все шаблоны

<script type="text/x-tmpl" id="tmpl-demo">
</script>

в отдельный файл. Если да, то как сделать, чтобы они/он определялись и исправно работали. Т.е сейчас, если я вставлю код шаблона на страницу на которой выводится запись, то все работает, мне же желательно, чтобы код был в другом файле.
И еще по поводу циклов, можете разжевать, как, где, куда, какой использовать. Или напишите простейший пример. Я сейчас, вывожу его в ajax так:

.done(function(stat){
              	stat = jQuery.parseJSON(stat);
				console.log(stat);
              	$('#projects').append(tmpl("tmpl-demo", stat));
                      inProgress = false;
                      startFrom += 10;
                 
					});

Так выводится 1 запись, т.к на стороне обработчика передаю только из массива только 1.

$stat = $db->fetch_assoc_array($asql, $aarr);
 echo json_encode($stat[0]);

Если передаю все, то без цикла данные не выводятся.

[Антон Шаманов]

Как и с обычный js код - добавить аттрибут src:

<script type="text/x-tmpl" id="tmpl-demo" src="..."></script>

как организовать цикл в шаблоне написано в документации к шаблонизатору, как организовать цикл средставами jquery написано в доках к jquery, я могу подсказать по ошибкам, но писать за тебя не стану.

[kr_ilya]

Антон Шаманов, благодарю!

Answer 2

[marsdenden]

Такой подход сильно усложняет код, посмотрите в сторону фреймворков - Vue.js, React. Ну или шаблонизатор lodash на худой конец.