Question

我试图从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>

Answer 1

页面加载后，您无法递增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

Answer 2

@Eric基本上是正确的但是如果你不熟悉这个模型的话，并没有真正详细说明......

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

1）发送新请求 - 您提供不同的参数，页面重新执行其逻辑并将新结果返回给用户

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

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

Answer 3

尝试将变量分配给$gags[0][$index]。像

这样的东西

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

然后

pic.src='<?php echo $imgsrc; ?>';

图像不会改变

3 个答案: