jQuery 使用 PHP 刷新 AJAX Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8840252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AJAX Div Refresh with PHP
提问by JD Audi
I am trying to refresh some elements on my page every so often. I know theres a million topics on here about that and I have tried to get mine working, but here is what I need to refresh..
我试图每隔一段时间刷新我页面上的一些元素。我知道这里有一百万个关于这个的主题，我试图让我的工作，但这是我需要刷新的..
This is the code that gets generated when the page loads:
这是页面加载时生成的代码：
<div id="galleria">
<?php
$a = array();
$dir = '../public/wp-content/uploads/2012/01';
if ($handle = opendir($dir)) {
while (false !== ($file = readdir($handle))) {
if (preg_match("/\.png$/", $file)) $a[] = $file;
elseif (preg_match("/\.jpg$/", $file)) $a[] = $file;
elseif (preg_match("/\.jpeg$/", $file)) $a[] = $file;
}
closedir($handle);
}
$totalImgs = count($a);
$imgUsed = array();
for ($j = 0; $j < 100; $j++)
{
do
{
$randIndex = mt_rand(0, $totalImgs);
}
while ($imgUsed[$randIndex] === TRUE);
$imgUsed[$randIndex] = TRUE;
echo "<img src='" . $dir . '/' . $a[$randIndex] . "' />";
}
?>
</div>
I would like to automatically refresh this every 10 seconds but not reload the page. I have read up on ajax and it seems this is possible but I cannot seem to get it to work.
我想每 10 秒自动刷新一次，但不重新加载页面。我已经阅读了 ajax，这似乎是可能的，但我似乎无法让它工作。
All this is doing is showing the galleria div, and loading the 100 images inside the div. Then the galleria script takes over and displays it nicely. Will AJAX work better or JQuery?
所做的一切就是显示 Galleria div，并在 div 中加载 100 张图像。然后 Galleria 脚本接管并很好地显示它。AJAX 或 JQuery 会更好吗？
Thank you for your help!
感谢您的帮助！
回答by Greg Pettit
"Will AJAX work better or jQuery?" -- AJAX is a technique, jQuery is a library. As it turns out, jQuery has an excellent API for AJAX.
“AJAX 好还是 jQuery 好？” -- AJAX 是一种技术，jQuery 是一个库。事实证明，jQuery 为 AJAX 提供了出色的 API。
Let's call this bit of PHP "galleria.php". On original page load, it is inserted into the parent PHP page using good ol' <?php include('galleria.php')?>. Now the end user is seeing the full initialized page.
让我们称这段 PHP 为“galleria.php”。在原始页面加载时，它使用 good ol' 插入到父 PHP 页面中<?php include('galleria.php')?>。现在最终用户看到的是完整的初始化页面。
To update it, you have a number of AJAX options available, but the easiest is to include jQuery on your page and then you can use .load()in a script:
要更新它，您有许多可用的 AJAX 选项，但最简单的方法是在您的页面中包含 jQuery，然后您可以.load()在脚本中使用：
var updateGallery = setInterval(function() {
$('#someDiv').load('galleria.php');
}, 10000);
There's room for tweaking... maybe galleria.phpdoesn't include the <div id="galleria">, which is set on the page. In which case you would load right into #galleriainstead of #someDivand save yourself an unnecessary container. Maybe you cache the $('#someDiv')object by declaring it in a different scope so that it can be re-used. But this is the general gist.
有调整的余地...也许galleria.php不包括<div id="galleria">在页面上设置的 。在这种情况下，您可以直接加载#galleria而不是#someDiv保存一个不必要的容器。也许您$('#someDiv')通过在不同的范围内声明它来缓存对象，以便它可以被重用。但这是一般要点。
回答by FURKAN ILGIN
Use setIntervalfunction with ajax call.
使用setIntervalajax 调用函数。
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
http://jquery-howto.blogspot.com/2009/04/ajax-update-content-every-x-seconds.html
回答by Ivan Buttinoni
As I wrote hereyou can fill a div with a jQuery ajax call.
正如我在这里写的那样，您可以使用 jQuery ajax 调用填充 div。
<html>
<head>
<script type="text/javascript">
function refresh_gallery(){
$.ajax({
type: "POST",
url: "generate_gallery.php", // your PHP generating ONLY the inner DIV code
data: "showimages=100",
success: function(html){
$("#output").html(html);
}
});
}
$(function() {
refresh_gallery(); //first initialize
setTimeout(refresh_gallery(),10000); // refresh every 10 secs
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
