выводить массив через Ajax на PHP

141

22 апреля 2021, 05:30

необходимо при клике выводить массив через Ajax на PHP. в моем случае PHP выводит NULL. нужно именно через Ajax и PHP

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
<div id="click" class="stone">click</div>
    <?php
    $data = json_decode(stripslashes($_POST['data']));
    var_dump($data);
    ?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
            $("#click").on("click", function(){
                var data=["a", "b", "c"];
                var jsonString = JSON.stringify(data);
                   $.ajax({
                        type: "POST",
                        url: "index.php",
                        data: {data : jsonString},
                        cache: false,
                        success: function(){
                            alert("OK"+jsonString);
                        }
                    });
               });
</script>
    </body>
</html>

Answer 1

Сделал рабочий пример использования ajax-запроса для отправки со страницы данных на сервер(PHP), получения от него новых данных и вывода их на странице.

Это должно помочь разобраться в вашем вопросе.

Описание:

На странице пользователь вводит через запятую значения и нажимает кнопку.
Клик-событие вызывает ajax-запрос (post + json) к php-скрипту на сервере, который передает в параметре data массив значений, полученных с помощью преобразования значений введеной на странице строки в массив(разделитель - символ запятой).
PHP-скрипт проверяет факт того, что совершен POST-запрос - значение параметра data супер-массива $_POST определено и если это так, то извлекает значения переданного массива data, добавляет в него два значения three и four, возвращает его в виде json-ответа и завершает свою работу.
Когда ответ от php-скрипта сервера получен, то полученные данные из массива преобразовываются в строку и отображаются на странице.

index.php:

<?php
if (isset($_POST['data'])) {
    echo header('Content-Type: application/json');
    if (!is_array($_POST['data'])) {
        $data = array();
    } else {
        $data = $_POST['data'];
    }
    $data[] = "three!";
    $data[] = "four!";
    echo json_encode($data);
    exit;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Прогоняем данные через AJAX-запрос</title>
    </head>
    <body>
        Входные данные на сервер:<br>
        <textarea class="input">one, two</textarea><br>
        <button id="click" class="stone">Отправить!</button><br>
        <hr>
        Выходные данные от сервера:<br>
        <textarea class="output"></textarea><br>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $("#click")
            .on("click", function() {
                    $.ajax({
                        type: "POST",
                        url: "index.php",
                        dataType: "json",
                        data: {data : $(".input").val().split(/\s*,\s*/)}
                    })
                    .done(function(data) {
                        if (!$.isArray(data)) {
                            alert("Ошибка! полученные данные не корректны!");
                        } else {
                            $(".output").val(data.toString());
                            console.log(data);
                        }
                    })
                    .fail(function (er) {
                        alert("Ошибка! Что-то пошло не так :(");
                    });
               });
        </script>
    </body>
</html>

Answer 2

Когда вы отправляете ajax запрос на ту же страницу, она уже отрисована и php отработал. Что бы пыха подобрала данные из массива $_post ей (пыхе, которая на сервере) нужно послать запрос на новую отрисовку страницы с данными из массива $_post. В вашем примере нет необходимости во вставке фрагмента php кода, достаточно результат подставить динамически тем же js

success: function(data) {
    $('#someelement').append(data);

Что бы пыхой ловить $_POST, надо перезагружать страницу. Это не ajax кейс. Именно в вашем случае нужна форма. Если вам надо отправить данные на файл-обработчик, что-то сделать с данными и вернуть некий результат обратно и всё это без перезагрузки страницы - тогда ajax