javascript - 通过点击按钮刷新图像，无需刷新页面

Question

我有一个用于图像搜索按钮的 div 类:

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        function myFunction() {

        <?php
            $link = "https://source.unsplash.com/all/?";
            $c=$link.$article->title;
            ?>
         document.getElementById("demo").innerHTML ="
        <?php echo "
            <img src=".$c." height='100' width='100'/>"?>"
        }

    </script>
</div>

如果我点击此按钮，我会通过我的关键字从此网址获取图像:

https://source.unsplash.com/all/?

但是如果我想通过单击此按钮选择另一张图像，我必须刷新页面。 所以问题是:我可以通过单击相同的搜索按钮来选择另一张图像而不刷新页面吗？ 对不起我的英语。

Answer 1

重新评估你的问题，这似乎更像是一个缓存问题。我仍然会保留我之前的答案，因为它可能对其他人有帮助。如下所示，尝试向网址添加时间戳，这应该会为您提供新图像:

<div class="form-group">
    <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <script>
        var link = "https://source.unsplash.com/all/?";
        var articleTitle = <?php echo "'" . $article->title . "'"; ?>;
        function myFunction() {
            var d = new Date();
            var c = link + articleTitle + "&" + d.getTime();
            document.getElementById("demo").innerHTML = "<img src=" + c + " height='100' width='100'/>";
        }

    </script>
</div>