AJAX随着时间的推移显示内容

时间:2018-03-21 14:46:07

标签: javascript php jquery

我在php中有一个脚本,用于显示内容并在一秒钟内添加另一个内容。我想在Jquery ajax中获得此效果,遗憾的是文本显示完整。如何在ajax中加载内容?

我的Jquery代码:

<div class="div"></div>  
<script src="//code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(){
  $.ajax({
    url: 'content.php',
    type: 'post',
    data:{ 
      name: 'name' 
    },
    success: function(r){
      $('.div').html(r);
    }
  })
});
</script>

content.php

<?php
echo "one";
ob_end_flush();
flush();
sleep(1);
echo $_POST['name'];
?>

1 个答案:

答案 0 :(得分:0)

要完全按照您的要求进行操作,您需要更改PHP以执行echo,flush(),ob_flush(),sleep(),然后执行以下操作:

$.ajax('content.php', {
    type: 'post',
    data:{ 
      name: 'name';
    },
    datatype: 'text',
    xhrFields: {
        onprogress: function(e) {
            var cur, response = e.currentTarget.response;
            if(last_len === false) {
                cur = response;
                last_len = response.length;
            } else {
                cur = response.substring(last_len);
                last_len = response.length;
            }
            $('.div').html(cur);
          }
        }
    });

但是,像这样使用睡眠是不好的做法。相反,您应该在javascript中处理时间并对不同的PHP文件或不同的数据进行定时的ajax请求以获得所需的输出。然后,你不需要做任何奇特的事情

$.ajax('content.php?first=one', {
    success: function(data) {
         return data; 
    }
});
setTimeout(function() {
    $.ajax('content.php?name=name', {
        success: function(data) {
            return data; 
        }
    });
}, 1000)

向content.php发出两个请求。在您的示例中,数据是静态的,因此我使用静态参数。如果您需要动态的东西,可以改为POST数据并动态设置已发布的变量。

显然,要使第二个选项有效,您需要相应地编辑content.php。