我正在制作一个网站,您可以在其中随机掷骰子。 首先,我创建了一个函数来放入 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 调用。
感谢您的帮助! 问候
最佳答案
由于您已经使用 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;
?>
关于javascript - 将 AJAX 添加到 PHP 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49716871/