从数据库获取/获取数据而不刷新页面 [英] Get/fetch data from database without refresh the page
问题描述
我遵循这个教程，以便在没有页面刷新的情况下获取数据，但我对此有一些担忧。
脚本工作正常，我发现唯一的问题是，如果我刷新，需要很多时间（约5-10秒）来再次加载内容。
在Firebug中，我可以在控制台看到它一直在绑定，因为它一直发送请求。
这里是代码
HTML
< div class =ajax_results>
< ul id =results>< / ul>
< / div>
PHP脚本
code> $ 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
（$）$（文件）.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 /上传/+ [[image_name]] +\/>< br />+此['title'] +< / li>）;
}）;
}）;
}
这是一个问题吗？我可以改进某些代码吗？任何帮助将不胜感激
给予一些额外的反馈。如果$ .getJSON直接放在$（document）.ready（function（））中，内容加载速度更快，但是如果发生任何更新，例如在标题中不会显示，而不刷新页面，我实际想要实现的是加载内容，如果发生任何更改，而不刷新页面。
这是另一种方法来解决问题>
$（function（）{
update_content（）;
}）;
函数update_content（）{
$ .getJSON（fetch_data.php，function（data）{
$（ul＃results）。empty（）;
$ .each .json，function（）{
$（ul＃results）。append（< li>< img src = \img / uploads /+ this ['image_name'] +\\ \\/>< br />+此['title'] +< / li>）;
}）;
setTimeout（function（）{
update_content（）;
}，1000）;
}）;
}
这里我有mo将setTimeout调用到update_content（）函数，并增加超时时间给浏览器一个喘息的空间，我个人不会每秒钟调用，但这只是一个例子，我可能会走10秒甚至甚至更长。
如果您不希望它反复删除整个setTimeout块。
$（function（）{
update_content（）;
}）;
函数update_content（）{
$ .getJSON（fetch_data.php，function（data）{
$（ul＃results）。empty（）;
$ .each（data.json，function（）{
$（ul＃results）。append（< li>< img src = \img / uploads /+ ['image_name'] +\/>< br />+此['title'] +< / li>）;
}）;
}） ;
}
Hi I'd like some help please. I'm currently learning Ajax and Json so I don't have much experience on it.
I have followed this tutorial in order to fetch the data without page refresh, but I'm having some concerns on it.
The script works fine, the only problem I found is that if I hit refresh it takes a lot of time (about 5-10 seconds)to load the content again. In Firebug I can see in the Console that it is continiously binding as it's sending requests all time. Here's the code HTML
<div class="ajax_results">
<ul id="results"></ul>
</div>
PHP script
$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));
and the 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>");
});
});
}
Is this a problem?? Can I improve somehow the code?? Any help would be appreciated
To give some extra feedback. If the $.getJSON is directly placed in $(document).ready(function() the content loads more quickly, but if any updates occured eg in the title won't show without refreshing the page. What I actually want to achieve is load the content and if any changes happened to show them without refreshing the page.
Here's another approach to the issue
$(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);
});
}
Here I've moved the setTimeout call into the update_content() function, and increased the timeout to give the browser a bit more breathing room, personally I wouldn't call this every second but it's just an example, I'd probably go with 10 seconds or even longer.
If you don't want it to fire off repeatedly remove the entire setTimeout block.
$(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>");
});
});
}
这篇关于从数据库获取/获取数据而不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
