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 tag），然后使用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]); ?>"/>

Answer 2

你试过用ajax用图像来更新div吗？

这是代码

$(document).ready(function(){
$('#clickme').click(function(){
 var number = 1 + Math.floor(Math.random() * 10);
$('#contentimg').attr('src','0'+number+'.jpg');
});
});

如果图像位于同一文件夹中，则可以相应地给出图像的src

按钮重新加载包含php的div的内容

2 个答案: