Php 在不刷新页面的情况下从数据库获取数据

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

为了在不刷新页面的情况下获取数据，我遵循了这一点，但我对此有些担心

脚本工作正常，我发现的唯一问题是，如果我点击“刷新”，重新加载内容需要很多时间（大约5-10秒）。 在Firebug中，我可以在控制台中看到它在不断地绑定，因为它一直在发送请求。 这是密码 HTML

还有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>");
        });
    });
}

$（文档）.ready（函数（）{
刷新（）；
});
函数刷新（）{
setTimeout（函数（）{
更新内容（）；
刷新（）；
}, 200);
}
函数更新_内容（）{
$.getJSON（“fetch_data.php”，函数（数据）{
$（“ul#results”）.empty（）；
$.each（data.json，function（）{
$（“ul#results”）。追加（“

”+此['title']+”
”；
});
});
}

这是个问题吗？？我可以改进代码吗？？任何帮助都将不胜感激

---

给一些额外的反馈。如果将$.getJSON直接放在$（document）.ready（function（）中内容加载速度更快，但如果出现任何更新（如标题中的更新），则在不刷新页面的情况下将无法显示。我真正想要实现的是加载内容，如果出现任何更改，则在不刷新页面的情况下显示内容。

下面是解决此问题的另一种方法

$(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);
    });
}

$（函数（）{
更新内容（）；
});
函数更新_内容（）{
$.getJSON（“fetch_data.php”，函数（数据）{
$（“ul#results”）.empty（）；
$.each（data.json，function（）{
$（“ul#results”）。追加（“

”+此['title']+”
”；
});
setTimeout（函数（）{
更新内容（）；
}, 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>");
        });
    });
}

$（函数（）{
更新内容（）；
});
函数更新_内容（）{
$.getJSON（“fetch_data.php”，函数（数据）{
$（“ul#results”）.empty（）；
$.each（data.json，function（）{
$（“ul#results”）。追加（“

”+此['title']+”
”；
});
});
}

问题在于setTimeout中的间隔，200毫秒是一个非常小的时间量！.2秒你的意思是我必须输入比这更大的值？？我个人认为是的！一秒钟内有1000毫秒，仅供参考。想象一下，仅ajax请求完成大约需要100毫秒，然后是将图像加载到浏览器所花费的时间，200毫秒后，无论上一个请求是否已完成，它都将再次发出请求。将setTimeout移到更新内容（）中可能是值得的函数，这样图像已加载，ajax请求已完成，然后再次启动。我将其切换为1000毫秒，加载速度确实更快！是否可以使用更好的方法来实现这一点，例如仅使用一个请求而不是infinate？

$(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);
    });
}

$(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>");
        });
    });
}