单击按钮后更改图像链接答案

【问题标题】：Change image-link after button click单击按钮后更改图像链接
【发布时间】：2016-03-13 13:28:46
【问题描述】：

我在我的博客中使用 Bing 图片搜索 API。我的请求的回应：

stdClass Object

    (
        [d] => stdClass Object
            (
                [results] => Array
                    (
                        [0] => stdClass Object
                            (
                                [__metadata] => stdClass Object
                                    (
                                        [uri] => https://api.datamarket.azure.com/Data.ashx/Bing/Search/Image?Query='Kitchen'&Market='en-us'&$skip=0&$top=1
                                        [type] => ImageResult
                                    )

                                [ID] => a40b8c85-8a6b-45a8-bce2-c07b16a942e6
                                [Title] => Our Kitchen Remodel is Complete!!! @ A Well Dressed Home
                                [MediaUrl] => http://awelldressedhome.com/wp-content/uploads/2010/10/Kitchen-31.jpg
                                [SourceUrl] => http://awelldressedhome.com/496-our-kitchen-remodel-is-complete/
                                [DisplayUrl] => awelldressedhome.com/496-our-kitchen-remodel-is-complete
                                [Width] => 4000
                                [Height] => 3000
                                [FileSize] => 5062458
                                [ContentType] => image/jpeg

我在此响应中得到 50 个结果（50 个不同的图像和 URL）。我有一个 php 代码，它在我的回复中为我提供了第一张图片的链接：

  <?php
            $context = stream_context_create($data);
            $response = file_get_contents($requestUri, 0, $context);
            $response=json_decode($response);
            $response = $response->d->results[0]->MediaUrl;
            echo "<pre>";
            print_r($response);
            echo "</pre>";
            echo '
                <td>
                 <img src="'.$response.'" height="100" weight="100">
                </td>
            ';
            echo("</ul>");
        ?>

我还制作了一个简单的按钮，它提供了我之前从回复中得到的第一张图片：

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        function myFunction()
        {
             document.getElementById("demo").innerHTML ="<?php echo "<img src=".$response." height='100' width='100'/>"?>"
        }
    </script>
</div>

所以问题是：每次单击按钮时如何获取新图像？对不起我的英语，谢谢你的帮助。

【问题讨论】：

如何生成一个随机数，得到相同ID的结果？
我生成了一个随机数，然后将其放入我的结果[]，但它仅在我重新加载页面时刷新我的图像，而不是通过单击此按钮...
在 url 后面放一个随机字符串，比如时间戳什么的。这将停止浏览器缓存。它与 url 匹配，带有时间戳，你总是安全的，因为它每秒都在变化
顺便说一句，我现在看到了 php 代码，你需要 javascript 才能在没有页面加载的情况下获取新图像。
有什么例子吗？请）

标签： javascript php jquery button

【解决方案1】：

您首先需要确保将您的网址写入 javascript：

<?php
    $urlList = array();
    foreach($response->d->results as $r){
        $urlList[] = $r->MediaUrl;
    }
?>
<script>
    var urls = <?php echo json_encode($urlList); ?>;
</script>

然后你可以在你的函数中使用这些 url：

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        var currentIndex = 0;
        function myFunction(){
             document.getElementById("demo").innerHTML = "<img src='" + urls[currentIndex++ % urls.length]  + "' height='100' width='100'/>";
        }
    </script>
</div>

【讨论】：