嗨,我想要一些帮助。我目前正在学习Ajax和Json,所以我没有太多的经验。
我已经按照这个tutorial来获取没有页面刷新的数据,但我对它有一些担忧。
脚本运行正常,我发现的唯一问题是,如果我点击刷新,则需要花费大量时间(约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()中,内容加载速度更快,但是如果发生任何更新,例如标题中的更新将不会在没有刷新页面的情况下显示。我实际想要实现的是加载内容,如果发生任何更改,则不刷新页面。
答案 0 :(得分: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>");
});
});
}