1

私は9gagから画像リンクを取得しようとしています(これも機能します)。ボタンをクリックすると、画像が次の画像に変わります。基本的な問題は、一度しか機能しないことです。ただし、1 番目の画像と 2 番目の画像を切り替えることはできます。これは非常に単純なはずですが、エラーがどこにあるのかわかりません。 

<?php 
    $index = 0
    $html = file_get_contents("http://www.9gag.com");
    preg_match_all( '|http://d24w6bsrhbeh9d\.cloudfront\.net/photo/.+?\.jpg|', $html, $gags);
?>

<script>
    function nextImg(){
        <?php $index++;?>
        pic.src='<?php echo $gags[0][$index];?>'; 
    }
    function prevImg(){
        <?php $index--;?>
        pic.src='<?php echo $gags[0][$index];?>';
    }
</script>
4

3 に答える 3

3

ページが読み込まれた後に PHP 変数をインクリメントすることはできません。JavaScript を使用してクライアント側でインクリメントしようとしています。ページを更新せずにこれを行う場合は、AJAX を使用してその PHP を呼び出す必要があります。その場合でも、JavaScript 変数をインクリメントして現在の場所を追跡する必要があります。

編集: PHP と JavaScript、具体的には jQuery ライブラリを使用して ajax ルーチンを作成することに少し夢中になりました。これを機能させるにはリンクする必要があります。達成しようとしていることに合わせてスクリプトの一部を変更する必要がある場合もありますが、これは確かに、期待どおりに ajax アプリを実行するためのガイドです。

次のスクリプトで PHP ファイルを作成することから始めます。

<?php
    // Set content header to json
    header('Content-Type: application/json');

    // Get the index from the AJAX
    $index = $_GET['index'];

    // Grab file contents & parse
    $html = file_get_contents("http://www.9gag.com");
    preg_match_all( '|http://d24w6bsrhbeh9d\.cloudfront\.net/photo/.+?\.jpg|', $html, $gags);

    // Send filename back to AJAX script as JSON
    echo json_encode(array($gags[0][$index]));
?>

次に、HTML にこの jQuery を含めて、PHP スクリプトへの AJAX 呼び出しを完了し、PHP スクリプトからのデータで DOM を更新します。

<script>
            $(function() {
                'use strict';

                // Initiate index variable
                var index = 0;

                // Load initial image
                loadImage(index);

                // Add click event to a button with class of next-btn
                $('.next-btn').click(function(e) {
                    e.preventDefault();

                    // Increment index to get next image
                    index++;

                    // Run AJAX function to retrieve image
                    loadImage(index);
                });

                // Add click event to a button with class prev-btn
                $('.prev-btn').click(function(e) {
                    e.preventDefault();

                    // Decrement the index if it isn't 0
                    if (index > 0) {
                        index--;
                    }

                    // Run AJAX function to retrieve image
                    loadImage(index);
                });
            });

            function loadImage(index) {
                'use strict';
                $.ajax({
                    type: 'GET',
                    url: 'your-php-script.php', // Filepath to your PHP script
                    data: 'index='+index, // Index is passed through GET request
                    dataType: 'json', // Return JSON
                    success: function (data) { // If the php script succeeds
                        // Change img with class of pic's src 
                        // to the filename retrieved from php
                        $('.pic').attr('src', data[0]);
                    }
                });
            }
        </script>

必要に応じてこれを構成するには、ある程度のデバッグが必要になる可能性があるため、PHP と jQuery/JavaScript に関するある程度の知識が必要です。幸運を！

EDIT 2：ダウンロードしたい場合は、動作中の（テスト済み、動作する）ソースファイルを私のWebサイトにアップロードしました。回答を受け入れて、ファイルを取得したことをお知らせください...

http://www.wedgewebdesign.com/files/ajax-image-loader.zip

于 2013-01-18T20:52:37.427 に答える
2

@Ericは基本的にそれを正しく持っていますが、モデルに精通していない場合は実際には詳しく説明しませんでした...

PHPは、Webホストサーバー上ですべての処理を実行し、完了すると静的な結果をユーザーに送り返すという点でサーバー側の言語です。つまり、次の2つのいずれかを実行しない限り、ページがPHP内にロードされた後に表示されるものはすべてそのまま残ります。

1）新しいリクエストを送信する-さまざまなパラメータを指定すると、ページはそのロジックを再実行し、新しい結果をユーザーに返します

2）何らかの形式のクライアントサイドJavascriptを実行します。JavascriptはPHPとは異なり、サーバーではなくクライアントで実行されるため、詳細情報が必要でない限り、必ずしもサーバーに応答を送信する必要はありません。JavascriptとPHPを組み合わせて、AJAX呼び出しを作成できます。これにより、クライアントは、ページ全体をリロードすることなく、より多くのデータを取得するためにWebサーバーに対して非同期呼び出しを行うことができます。Javascriptは、ユーザーにシームレスに表示できる新しい情報の再描画またはページの更新を処理します。

したがって、必要なのはこれら2つのオプションのいずれかです。'next' /'previous'リンクをユーザーに提供し、ページが毎回異なる方法でロードされるか、次の画像のURLをフェッチしてロードするAJAX呼び出しを作成します。

于 2013-01-18T20:59:52.643 に答える
-1

に変数を代入してみてください$gags[0][$index]。何かのようなもの

$imgsrc = $gags[0][$index];

その後

pic.src='<?php echo $imgsrc; ?>';
于 2013-01-18T20:52:36.367 に答える