1

嗨，我需要一些帮助。我目前正在学习 Ajax 和 Json，所以我没有太多经验。

我已按照本教程进行操作，以便在不刷新页面的情况下获取数据，但我对此有些担心。

该脚本运行良好，我发现的唯一问题是，如果我点击刷新，再次加载内容需要很长时间（大约 5-10 秒）。在 Firebug 中，我可以在控制台中看到它不断地绑定，因为它一直在发送请求。这是代码HTML

<div class="ajax_results">
    <ul id="results"></ul>
</div>

PHP 脚本

$query = "SELECT `img_id`, `image_name`, `title` FROM `images` ORDER BY `img_id` DESC LIMIT 5 ";
$run = mysqli_query($connection, $query) or die(mysqli_error($connection));

$json = array();
while ($row = mysqli_fetch_array($run, MYSQLI_ASSOC)) {
    array_push($json, array('image_name' => $row['image_name'],
                            'title' => $row['title']));
}
echo json_encode(array("json" => $json));

和 JS

$(document).ready(function() {
    refresh();
});

function refresh() {
    setTimeout(function() { 
        update_content(); 
        refresh();
    }, 200);
}

function update_content() {
    $.getJSON("fetch_data.php", function(data) {
        $("ul#results").empty();
        $.each(data.json, function() {
            $("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
        });
    });
}

这是有问题吗？？我可以以某种方式改进代码吗？任何帮助，将不胜感激

提供一些额外的反馈。如果将 $.getJSON 直接放在 $(document).ready(function() 中，则内容加载速度会更快，但是如果发生任何更新，例如标题中的任何更新都不会在不刷新页面的情况下显示。我真正想要实现的是加载内容，如果有任何更改发生在不刷新页面的情况下显示它们。

4

1 回答 1

0

这是解决该问题的另一种方法

$(function() {
    update_content();
});

function update_content() {
    $.getJSON("fetch_data.php", function(data) {
        $("ul#results").empty();
        $.each(data.json, function() {
            $("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
        });
        setTimeout(function(){
            update_content();
        }, 1000);
    });
}

在这里，我将 setTimeout 调用移到了 update_content() 函数中，并增加了超时以给浏览器更多的喘息空间，我个人不会每秒钟调用一次，但这只是一个例子，我可能会去10秒甚至更长。

如果您不希望它反复触发，请删除整个 setTimeout 块。

$(function() {
    update_content();
});

function update_content() {
    $.getJSON("fetch_data.php", function(data) {
        $("ul#results").empty();
        $.each(data.json, function() {
            $("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
        });
    });
}
于 2013-09-04T08:32:37.940 回答