Javascript Jquery与PHP和AJAX页面更新_Javascript_Php_Jquery_Ajax

Javascript Jquery与PHP和AJAX页面更新

javascript php jquery ajax

Javascript Jquery与PHP和AJAX页面更新,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我在PHP中有一个for循环，在带有Jquery库的JavaScript中有一个Ajax调用。我的问题是，我想在每次php循环之后更新页面。现在等待10秒，然后，显示页面。我想一行一行地实时显示 data.php <?php for($i=0;$i<10;$i++) { echo "lorem ipsum" . "<br>"; sleep(1); } ?> 以及index.php <!DOCTYPE html> <html>

我在PHP中有一个for循环，在带有Jquery库的JavaScript中有一个Ajax调用。我的问题是，我想在每次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>

//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中，不需要睡眠和循环。循环将在带有setTimeout的Javascript中完成

因此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>

实际上，您希望根据服务器端php代码上循环的每次迭代，在一秒钟后执行10次页面更新。我建议您重新设计，以便循环发生在客户端，而在服务器端，您只需响应每个请求。我认为这种方法很容易理解

下面的客户端代码未经测试，显示了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>

//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>";
?>

您所说的一行接一行实时显示是什么意思？My data.php必须显示十行，每行显示一秒钟。现在myindex.php，10秒后显示我的所有行。我希望每一秒都用当前行更新。顺便说一句，您的设置超时可能没有按预期工作。当您将ajaxCall传递给超时时，您正在调用ajaxCall，它应该是setTimeoutajaxCall，1000；。这实际上会将执行延迟1s。请记住，data.php中的睡眠是在它自己的上下文中进行的。因此，它在睡眠10秒后返回迭代打印。您应该将index.php中的sleep功能作为JScript使用。您可以解释一下此功能背后的意图吗？现在，这看起来是一个非常奇怪的任务，你不想使用AJAX。谢谢！我用@Parkyprg solution解决了这个问题，但是用了setInterval而不是setTimeout。它就像一个符咒。谢谢大家!！