javascript - 将 AJAX 添加到 PHP 表单

Question

我正在制作一个网站，您可以在其中随机掷骰子。首先，我创建了一个函数来放入 JavaScript 中。现在我想要 PHP 版本。一切正常，但如果我尝试将其放入 PHP 中，整个站点总是会重新加载。

所以我读到我必须使用 AJAX。但这不起作用。该网站使用 jQuery，因此这应该是一个简单的任务。我尝试了几个小时，但没有成功。你能看出问题出在哪里吗？

代码如下:

<form name="imageForm">
<table border=0>
<tr>
<td>
<img src="<?php echo $randomImage; ?>" name="canvas" width="50%" height="auto"/>
</td>
</tr>
<tr>
<td>
<br>
<form method="post"><input type="submit" name="random" id="randomImage" value="random" class="btn type--uppercase"/><br/></form>
<a onclick="displayImage();" class="btn btn--lg type--uppercase" href="#random"><span class="btn__text">
Random Dice Roll
</span>
</td>

</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</section>

 
<!-- Scripts -->
<script>
function displayImage(){
$.ajax({
url: "random.php",
success: function(data){
$('img[name="canvas"]').attr('src', data);
}
});
return false;
}
</script>
<script src="js/parallax.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/random-dice-6-sides/random.js"></script>
</body>
</html>

还有 random.php

<?php
    $imagesDir = 'img/random-dice-6-sides/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    $randomImage = $images[array_rand($images)];
    echo $randomImage;
?>

您可以在 https://randomster.com/random-dice-6-sides.php 上看到整个过程

橙色按钮是 php 调用，白色是 Javascript 调用。

感谢您的帮助!问候

Answer 1

由于您已经使用 anchor 标记附加了事件处理程序 onclick="displayImage();"，因此您的 jQuery/AJAX 代码应如下所示:

<script>
    function displayImage(){
        $.ajax({
            url: "YOUR_PAGE.php",
            success: function(data){
                $('img[name="canvas"]').attr('src', data);
            }
        });
        return false;
    }
</script>

不要忘记将 YOUR_PAGE.php 替换为您的实际页面，即您要发送 AJAX 请求的页面。

在后端 PHP 代码中，您只需 echo $randomImage,

<?php
    $imagesDir = 'img/random-dice-6-sides/';
    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
    $randomImage = $images[array_rand($images)];
    echo $randomImage;
?>