Jquery с обновлением страницы PHP и AJAX

#javascript #php #jquery #ajax

Вопрос:

У меня есть цикл for в PHP и вызов Ajax в JavaScript с библиотекой Jquery. Моя проблема в том, что я хочу обновлять страницу после каждого цикла php. Теперь он ждет 10 секунд и после этого показывает мне страницу. Я хочу отображать в режиме реального времени строку за строкой.

data.php

  <?php

for($i=0;$i<10;$i  ) {

echo "lorem ipsum" . "<br>";
sleep(1);

 }

  ?>

И index.php

 <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>


                function ajaxCall(){
                $.ajax({url:"data.php",success:function(result){
                    $("#div1").html(result);
                }});
            }


                setTimeout(ajaxCall(), 1000);

    </script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

1. что вы подразумеваете под «отображением в реальном времени, строка за строкой»?

2. Мой data.php должно отображаться десять строк, каждая строка через секунду. Теперь … мой index.php , через 10 секунд отображает все мои строки. Я хочу каждую секунду обновлять текущую строку.

3. Кстати, ваш setTimeout , вероятно, работает не так, как вы ожидаете. Вы вызываете ajaxCall , когда передаете его тайм-ауту, так и должно быть setTimeout(ajaxCall, 1000); . Это фактически задержит выполнение на 1 секунду.

4. Имейте в виду, что режим сна в вашем data.php находится в своем собственном контексте. Таким образом, он возвращает повторные отпечатки после 10 секунд ожидания. У вас должна быть функция ожидания в вашем index.php в виде jscript

5. Не могли бы вы объяснить, что стоит за этой функциональностью? Прямо сейчас это выглядит как очень странная задача, для которой вы бы не захотели использовать AJAX.

Ответ №1:

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

Приведенный ниже код на стороне клиента не тестировался и показывает подход (index.php )

 //this is called 10 times, with i being the number of the call starting at 1
function ajaxCall(i){
  //note the query string parameter being passed to the php script
  $.ajax({url:"data.php?i=" i,success:function(result){ 
    $("#div1").html(result); 
    if(i<10){ //if we have not reached 10 calls, delay and then call again while  incrementing the count
      setTimeout(ajaxCall(i 1), 1000);
    }
  }
});

//make the first ajax call
setTimeout(ajaxCall(1), 1000);

В data.php вам нужно проверить этот параметр строки запроса. Обратите внимание, что в вашем коде на стороне сервера больше нет цикла и нет спящего режима.

 <?php
$i = $_GET["i"];
//do something with $i which should be in the range 1-10 (you should check this)
echo "lorem ipsum " . $i . "<br>";
?>

Ответ №2:

В вашем data.php , нет необходимости в режиме сна и в цикле. Цикл будет выполняться на Javascript (с setTimeout).

Итак data.php может выглядеть примерно так:

  <?php

echo "lorem ipsum" . "<br>";

  ?>

И ваш index.php следует добавить данные:

 <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>


                function ajaxCall(){
                $.ajax({url:"data.php",success:function(result){
                    $("#div1").append(result);
                }});
            }


                setTimeout(ajaxCall, 1000);

    </script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>