Добавить AJAX в форму PHP

avatar
user9614733
8 апреля 2018 в 10:26
95
2
0

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

Спасибо за помощь! Приветствую

Источник
geisterfurz007
8 апреля 2018 в 14:34
1

Не запутывайте свой вопрос, пожалуйста.

Ответы (2)

avatar
Gytis TG
8 апреля 2018 в 11:06
0

Я предлагаю переместить ссылку на скрипт jquery, так как сейчас она внизу, и я получаю ReferenceError: $ is not defined.

Внесено несколько изменений. Ваш целевой файл (который должен возвращать новое изображение) я добавил:

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

И ваш индексный файл:

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

<section class="text-center page-title bg--dark">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8">
<h1>Welcome to Randomster.com</h1>
<p class="lead"> Blah </p>
<form name="imageForm">
<table border=0>
<tr>
<td>
<!-- Result displayed here -->
<img id="canvas" src="<?php echo $randomImage; ?>" name="canvas" width="50%" height="auto"/>                                                        </td>
</tr>
<tr>
<td>
<br>
<!--PHP Call-->
<form method="post">
    <input type="submit" name="random" id="randomImage" value="random" class="btn type--uppercase"/><br/>
</form>
<!--Javascript Call-->
<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>

<script>
$(document).ready(function(){
    // AJAX to target file (in this case, index2.php)
    $("#randomImage").click(function(e) {
        e.preventDefault();

        $.ajax({
            method: "POST",
            url: "index2.php",
        })
        .done(function(results) {
            $("#canvas").attr('src', results);
        })
    });
});
</script>

Часть PHP для отображения начального изображения. Элемент изображения теперь имеет идентификатор, потому что он нужен jQuery (в моем случае), и был добавлен AJAX.

user9614733
8 апреля 2018 в 11:47
0

Привет! Спасибо за вашу помощь. Я добавил код, но одна и та же страница всегда перезагружается, и я не знаю, почему. И теперь эхо показывается вверху страницы вместо кубиков. Я обновил свой исходный пост полным исходным кодом. Можете ли вы просмотреть его и увидеть проблему? Большое спасибо!

Gytis TG
8 апреля 2018 в 12:26
0

@JohnNoe Правда. Обновлено. Вам нужно остановить событие от использования действия по умолчанию. Проверьте на e.preventDefault();.

avatar
Rajdeep Paul
8 апреля 2018 в 10:58
1

Поскольку вы уже прикрепили обработчик событий 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;
?>
user9614733
8 апреля 2018 в 11:47
0

Привет! Спасибо за вашу помощь. Я добавил код, но одна и та же страница всегда перезагружается, и я не знаю, почему. И теперь эхо показывается вверху страницы вместо кубиков. Я обновил свой исходный пост полным исходным кодом. Можете ли вы просмотреть его и увидеть проблему? Большое спасибо!

Rajdeep Paul
8 апреля 2018 в 11:55
0

@JohnNoe Возможно, вам следует вернуть false из функции displayImage(), чтобы избежать перезагрузки/перенаправления. Я обновил свой ответ, проверьте свое приложение с обновленным фрагментом кода.

Rajdeep Paul
8 апреля 2018 в 11:58
0

@JohnNoe А, теперь я вижу. Вы должны разделить свой код jQuery/AJAX и внутренний PHP-код, т.е. поместить свой PHP-код на другую страницу и соответствующим образом изменить настройку URL-адреса url: "YOUR_PAGE.php", в запросе AJAX.

user9614733
8 апреля 2018 в 12:27
0

Привет! Я поместил php-код в random.php и включил его. Но никак, всегда одна и та же ошибка. Я снова обновил свой вопрос. Это сводит меня с ума :/

Rajdeep Paul
8 апреля 2018 в 12:39
0

@JohnNoe Вы не изменили параметр url своего запроса AJAX, измените его на url: "random.php",

user9614733
8 апреля 2018 в 12:48
0

Привет! Теперь я сделал. Но тот же результат.

Rajdeep Paul
8 апреля 2018 в 13:17
0

@JohnNoe 1. Я все еще не вижу random.php в настройке url вашего запроса AJAX. 2. Публикуйте только те фрагменты кода, которые соответствуют вашему вопросу. 3. Проверьте правильность относительного пути к изображениям.

user9614733
8 апреля 2018 в 13:30
0

Привет. Без проблем. Я урезал код и добавил текущее состояние. Пути к картинкам правильные.