javascript - 用于重新加载包含 php 的 div 内容的按钮

Question

我有一个包含从目录加载随机图像的 php 的 div。当我重新加载页面时，这个位工作正常。代码:

<div id="imageArea">

    <?php
        $dir = 'images/assets/';
        $images = scandir($dir);
        $i = rand(2, sizeof($images)-1);
    ?>
    <img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>

</div>

在页面的下方，我有另一个包含按钮的 div。我想要它，以便当人们单击此按钮时它加载一个新的随机图像，我想它会重新加载 div，但我不希望它重新加载页面，这可能吗？按钮:

<div id="newPic">
<input type="button" value="Reload" id="Reload"/>
</div>

我试过:

<script>
$(document).ready(function(){
    $("#Reload").click(function(){
        $("#imageArea").html("result reloaded successfully");
    });
});
</script>

和:

$(document).ready(function(){
   $("#Reload").click(function(){
     $("#imageArea").html(ajax_load).load(loadUrl);
   });
});

我是 php 和 javascript 的新手，所以我一直在遵循其他人的指示。

谢谢

Answer 1

将您的 php 脚本拆分到另一个文件(只需回显 img 标记)，然后使用 ajax 调用该页面。

$("#reload").click(function(){
  $.ajax({
     url:"demo.php",success:function(ajax_load){
     $("#imageArea").html(ajax_load)
  }});
}); 

php文件

<?php
    $dir = 'images/assets/';
    $images = scandir($dir);
    $i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>