Question

我正在尝试使用ajax直接加载页面。以下是详细信息：

HTML：

<div id="feedback"> </div>
<script type="text/javascript" src="script.js"></script>

的script.js：

$(document).ready(function() {
    $.ajax({
        url: 'do.php',
        success: function(data){
            $('#feedback').html(data);
    });
});

do.php：

<?php
    //Do whatever...
    echo "Done!";
?>

我所看到的是：页面首先加载，并且在“反馈”div写入之前有一段延迟。我该如何解决这个问题？

Answer 1

据我所知，当然会有延迟。假设现在包含<div id="feedback">[…]</div>的页面在第0秒加载：

$(document).ready(function() {
    $.ajax({
        url: 'do.php',
        success: function(data){
            $('#feedback').html(data);
    });
});

当文档加载时，显然它被称为可见。因此，假设在文档准备好后第3秒调用它 - 您可以参考to this page获取详细信息 - 现在您将看到feedback div空白3秒。

我可以建议两件事：

您可以在div中默认放置加载程序图像，这样您的代码就会更改为<div id="feedback"><img src='loader.gif'></div>（假设您在页面的同一目录中有loader.gif）。通过这样做，您将使用户直观地了解某些处理正在进行并将加载数据。
相反，如果你可以放置file_get_contents()或include()，那么它会看起来像<div id="feedback"><?php file_get_contents('do.php');?></div>或<div id="feedback"><?php include('do.php');?></div>据我所知file_get_contents将执行页面，然后加载，而include将加载，然后执行因此在include（）中你有可用的页面中的变量，而在file_get_contents不可用，但CSS将在两种情况下都有效。
< / LI>

Answer 2

您可以立即开始加载，然后在所有内容完成后添加数据。

var _data = null;
var _ready = false;

$.ajax({
    url: 'do.php',
    success: function(data){
        _data = data;
        tryAddData();
    }
});

$(document).ready(function() {
    _ready = true;
    tryAddData();
});

function tryAddData(){
     if(_ready && _data !== null){
         $('#feedback').html(_data);
     }
}

如何从ajax立即加载PHP？

2 个答案: