1

我正在尝试从 9gag 获取图像链接（也可以使用），当我单击一个按钮时，图像会变为下一个。基本问题是它只工作一次。不过，我可以在第一张和第二张图像之间切换。这应该很简单，但我不知道错误在哪里，所以在此先感谢任何愿意看这个的人。 

<?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 创建一个 ajax 例程，特别是 jQuery 库，你需要链接到它才能工作。您可能还需要修改脚本的某些部分以处理您要完成的工作，但这肯定是您希望运行 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 知识，因为可能需要进行一些调试。祝你好运！

编辑 2：如果您想下载，我将工作（经过测试，可以工作）源文件上传到我的网站。请接受答案，让我知道你抓住了文件......

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

于 2013-01-18T20:52:37.427 回答
2

@Eric 基本上是正确的，但如果您不熟悉该模型，则不会真正详细说明...

PHP 是一种服务器端语言，因为它在 Web 主机服务器上进行所有处理，一旦完成，就会将静态结果发送回用户。这意味着，您在 PHP 中加载页面后看到的任何内容都将保留，除非您执行以下两项操作之一：

1）发送一个新的请求——你提供不同的参数，页面重新执行它的逻辑并返回一个新的结果给用户

2）执行某种形式的客户端Javascript。Javascript 与 PHP 的不同之处在于它在客户端（而不是服务器）上执行，因此您不必将响应发送回服务器，除非您需要更多信息。Javascript 和 PHP 可以结合起来创建 AJAX 调用，允许客户端异步调用 Web 服务器以获取更多数据，而无需重新加载整个页面。Javascript 处理重新绘制新信息或更新对用户来说可以无缝显示的页面。

因此，您需要的是这两个选项之一。您可以向用户提供“下一个”/“上一个”链接，并且每次加载页面的方式都不同，或者您创建一个 AJAX 调用来获取下一个图像的 url，然后加载它。

于 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 回答