Я делаю веб-сайт, где вы можете случайным образом бросать кости. Сначала я сделал функцию для добавления 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.
Спасибо за помощь! Приветствую
Не запутывайте свой вопрос, пожалуйста.