ajax запрос из php

174

30 октября 2018, 18:00

доброе утро. Проблема: на странице (главной) имеется много блоков, в которые нужно загружать список пользователей через цикл php, соответственно, загружается страница очень долго, так как ждет пока загрузятся все блоки и выполнятся все циклы. Решил сделать это с помощью ajax, но так как полный ноль в нем, не могу разобраться до конца как это работает. Нужно что бы при наведении на определенный id элемента выполнялся php скрипт (есть отдельный файл). Когда подключаю файл через include - выполняются все циклы, подключал библиотеку jquery, результата ноль. Файл подгружается сразу при загрузке страницы. Можете подсказать от чего отталкиваться, в какую сторону смотреть?

Answer 1

$("#test").mouseenter(function(){ 
    setTimeout(function(){ 
        $.ajax({ 
            url:"test.php", 
            success:function(){ 
                alert("success"); 
            }, 
            error:function(){ 
                alert("ERROR"); 
            } 
        }); 
    },5000); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a id='test'>LINK</a>

Пример использования.
setTimeout можно убрать или лучше сократить.

Answer 2

Во-первых, если долго грузится страница сначала советую проверить ваши запросы...скорее всего их нужно оптимизировать и возможно этого даже будет достаточно...

Во-вторых, по наведению лучше ничего не делать, а сделать следующим образом

1.Во все блоки которые нужно "догрузить" добавляем класс "onLoad" и обязательно уникальный id

<div id="peoples" class="onLoad"></div>

2.Написать php обработчик который будет отдавать html для блоков

<?php 
   function getBlock(){ 
      $html = '';
      if(!empty($_POST['block'])){
         $blockId = $_POST['block'];
         //формируем html(подтягиваем наш "view")
         $html = '...';
      }
      return ['html' => $html];
   } 
?>

3.Написать метод "инициализации" страницы который будет выглядеть примерно следующим образом

<script>
   function load(){
     //запрашиваем данные для необходимых блоков в цыкле
     $(".onLoad").each(function( index ) {
        $id = $(this).attr('id');
        $.ajax({
           type: "POST",
           url: "url-обработчика",
           data: {block:$id},//post передаем id Блока
           success: function(result){
              //выводим данные в необходимые блоки
              $($id).html(result.html);
           },
           datatype: "json"
        });
     }
   }
</script>

4.Вызываем наш "инициализатор" сразу после загрузки страницы

<script>
   $(document).ready(function(){ load(); }) 
</script>

В блоки которые будут добавляться данные можно вставить прелодр для более приятной визуализации

Answer 3

ajax

    <script> 
    function load(){ 
    $.ajax({ 
url:"https://10.128.100.59/local/templates/.default/components/bitrix/socialnetwork.blog.post/.default/readnotlist.php", 
    datatype: "json", 
    cache: false, 
    async: true, 
    contentType: "application/json; charset=utf-8", 
    method: "POST", 
    			data: { }, 
                success:function(){ 
                $("#not-read-<?=$arResult['Post']['ID']?>").html(result.html); 
            }, 
            datatype: "json" 
                } 
            }); 
        } 
    </script>

php

    <?php 
function getBlock(){  
	foreach (GetNotReadUsers($arResult['Post']['ID']) as $readnot) { 
             $rs = CUser::GetByID($readnot); 
				$ar = $rs->Fetch(); 
if ($ar['ACTIVE']=="Y") { 
			 $avatar=CFile::GetPath($ar['PERSONAL_PHOTO']); 
 return ['html' => $ar['LAST_NAME']]; 
	//echo $ar['LAST_NAME'].'-'.$ar['NAME'].'<br>'; 
}}} 
?>

Ответа нет.