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 のどちらがうまく機能しますか?

ご協力ありがとうございました！

4

3 に答える 3

5

「AJAX と jQuery のどちらがうまく機能しますか?」-- AJAX はテクニック、jQuery はライブラリです。結局のところ、jQuery には AJAX 用の優れた API があります。

この PHP のビットを「galleria.php」と呼びましょう。元のページの読み込み時に、good ol' を使用して親 PHP ページに挿入されます<?php include('galleria.php')?>。これで、エンド ユーザーには初期化された完全なページが表示されます。

.load()それを更新するには、いくつかの AJAX オプションを利用できますが、最も簡単な方法は、ページに jQuery を含めて、スクリプトで使用できるようにすることです。

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

微調整の余地があります...ページに設定されている がgalleria.php含まれていない可能性があります。<div id="galleria">その場合、#galleria代わりに直接ロードし#someDivて、不要なコンテナーを保存します。オブジェクトを別のスコープで宣言してキャッシュし、$('#someDiv')再利用できるようにすることもできます。しかし、これは一般的な要点です。

于 2012-01-12T18:35:52.100 に答える
2

setInterval関数を ajax 呼び出しで使用します。

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

于 2012-01-12T18:34:18.573 に答える
0

ここに書いたように、div を jQuery ajax 呼び出しで埋めることができます。

 <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>
于 2012-01-12T18:44:09.893 に答える