Question

我试图创建一个PHP页面，定期更新页面上几个元素的值。我使用的主机限制了我每天的点击次数，每次点击他们为我托管的任何页面都会影响我的总数。因此，我尝试使用JQuery / AJAX一次从其他页面加载我需要的所有信息。

我正在调用以下index.php。这种方法完全按照我想要的方式实现了预期的效果，但每两秒就会产生三次命中（dating.php，dgperc.php和pkperc.php）：

＆＃13;

var focused = true;
$(window).blur(function() {
    focused = false;
});
$(window).focus(function() {
    focused = true;
});
function loadData() {
    if (focused) {
         var php = ["dating", "dgperc", "pkperc"];
         $.each(php, function(index, value) {
             $('#'+this).load(this+'.php');
         });
    }
}
$(document).ready(function() {
    loadData();
});
setInterval(function() {
    loadData();
}, 2000);

＆＃13;

我正在调用以下index1.php。这就是我所处的方法，只能每两秒产生一次命中。我的解决方法是将我加载的三个php页面合并为一个，dating1.php。我将它同时加载到div元素#cache中。使用CSS将此元素设置为隐藏，然后我将其内部HTML复制到相应的元素中：

＆＃13;

var focused = true;
$(window).blur(function() {
    focused = false;
});
$(window).focus(function() {
    focused = true;
});
function loadData() {
    if (focused) {
        var php = ["dating", "dgperc", "pkperc"];
        $('#cache').load('dating1.php');
        $.each(php, function(index, value) {
            $('#'+this+'1').html($('#'+this).html());
        });
    }
}
$(document).ready(function() {
    loadData();
});
setInterval(function() {
    loadData();
}, 2000);

＆＃13;

Dating1.php每次运行时都会生成不同的输出，但这里有一个输出示例：

＆＃13;

<span id = "dating">4 years, 7 months, 3 weeks, 10 seconds ago.</span>
<span id = "dgperc">21.9229663059</span>
<span id = "pkperc">22.2121099923</span>

＆＃13;

在文档就绪时，index1.php无法正常运行：#cache元素根本没有填充，因此其他元素也不会被填充。但是，两秒钟后，loadData（）函数再次运行，然后正确填充#cache元素，其他元素也是如此。出于某种原因，这在我的index.php页面上根本不是问题，我不确定为什么会有这样的差异。

如何首次加载#cache以便正确加载页面？或者有更好的方法吗？

Answer 1

每个AJAX调用基本上都是后台页面访问。就像告诉你的助手三次不同，给你一杯咖啡。或者告诉他们一个人可以给你三杯咖啡。

如果您不想将三个PHP页面合并为一个 - 从而使代码保持独立且易于维护。考虑在其中创建一个“cache.php”脚本：

cache.php:

$outputData = array('dating' => false, 'dgperc' => false, 'pkperc' => false);

foreach($outputData as $file => &$data)
{
    //buffer output
    ob_start();

    //run first script (be smart and file_exists() first)
    include_once($file . '.php');

    $data = ob_get_clean();
}

//output JSON-compliant for easy jQuery consumption
echo json_encode($outputData);

然后在你的javascript中：

function loadData() {
    if (focused) {
        //call ajax with json and fill your spans
        $.ajax({
            async: true,
            cache: false,
            dataType: 'json',
            success: function(data, textStatus, jqxhr) {
                $('#dating').html(data.dating);
                $('#dgperc').html(data.dgperc);
                $('#pkperc').html(data.dgperc);

                // NOTE... do a console.dir(data) to get the correct notation for your returned data
            },
            url: 'cache.php'
        });
}

你每两秒钟调用cache.php一次，节省了单独调用php文件的3次点击。使用中间人文件，您可以将脚本分开以保持可维护性。

使用JQuery在文档就绪上加载AJAX时出错

1 个答案: