使用 PHP AJAX Div 刷新

发布于 2024-12-26 12:12:54 字数 1064 浏览 2 评论 0原文

我试图经常刷新页面上的一些元素。我知道这里有一百万个主题，我试图让我的主题工作，但这是我需要刷新的内容。

这是页面加载时生成的代码：

<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>

我想每 10 自动刷新一次秒但不重新加载页面。我已经阅读了ajax，这似乎是可能的，但我似乎无法让它工作。

所有这一切都是为了显示 Galleria div，并在 div 内加载 100 张图像。然后，Galleria 脚本接管并很好地显示它。 AJAX 和 JQuery 哪个效果更好？

感谢您的帮助！

原文

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.

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?

Thank you for your help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小忆控 2025-01-02 12:12:54

“AJAX 和 jQuery 哪个效果更好？” -- AJAX 是一种技术，jQuery 是一个库。事实证明，jQuery 有一个优秀的 AJAX API。

我们将这段 PHP 称为“galleria.php”。在原始页面加载时，使用良好的 ol' 将其插入到父 PHP 页面中。现在，最终用户看到的是完整的初始化页面。

要更新它，您有许多可用的 AJAX 选项，但最简单的方法是在页面上包含 jQuery，然后您可以在脚本中使用 .load()：

var updateGallery = setInterval(function() {
  $('#someDiv').load('galleria.php');
}, 10000);

还有调整的空间...也许 galleria.php 不包含页面上设置的

。在这种情况下，您可以直接加载到 #galleria 而不是 #someDiv 中，并为自己节省一个不必要的容器。也许您可以通过在不同的作用域中声明 $('#someDiv') 对象来缓存它，以便可以重复使用它。但这是一般要点。

"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.

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.

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:

var updateGallery = setInterval(function() {
  $('#someDiv').load('galleria.php');
}, 10000);

There's room for tweaking... maybe galleria.php doesn't include the <div id="galleria">, which is set on the page. In which case you would load right into #galleria instead of #someDiv and 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.

回复收藏 0 原文

隔岸观火 2025-01-02 12:12:54

将 setInterval 函数与 ajax 调用结合使用。

http://jquery-howto.blogspot .com/2009/04/ajax-update-content-every-x-seconds.html

回复收藏 0 原文

昵称有卵用 2025-01-02 12:12:54

正如我所写的在这里您可以使用 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>

As I wrote here you can fill a div with a jQuery ajax call.

 <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>

回复收藏 0 原文

~没有更多了~