Передать данные из javascript PHP Ajax

передача данных от javascript в php

Передача данных от fronted на backend(от javascript в php в нашем случае) сейчас достаточно часто используемая процедура, естественно, когда известно, как это сделать.

Что потребуется для работы:

  • Сервер, где можно запустить php-скрипты;
  • Текстовый редактор;
  • Базовые знания PHP;
  • Базовые знания Javascript;
  • Понимание как работают GET и POST — запросы, в данной статье в основном будут использоваться POST — запросы.

Совсем простой пример

Несколькими годами раньше, нужно было писать большие и сложные запросы, но с приходом Jquery, все стало гораздо проще, поэтому первым шагом подключаем библиотеку jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

В первом примере, будем просто отправлять строку, при помощи функции $.post Jquery, где первым параметром передается название нашего php-скрипта, вторым — данные, если они есть, третьим функция обратного вызова(callback), в аргумент data, которой к нам придет ответ от сервера, если он будет. Пример кода js:

<script>
        $.post("script.php", {dataReq: "Передаваемая строка"}, function(data)
        {
           console.log(data);
        });
</script>

В результате у Вас должен получиться файл index.php, примерно такого содержания:

<!doctype html>
<html lang=ru>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Ajax php</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $.post("script.php", {dataReq: "Передаваемая строка"}, function(data)
    {
        console.log(data);
    });
</script>
</body>
</html>

В php эти данные придут в $_POST[‘dataReq’]. Поэтому в самом простом примере, мы возьмем эту строку и отправим ее обратно, без всякой проверки. Пример кода script.php:

<?php

echo $_POST["dataReq"];

?>

Открываем консоль в браузере и проверяем результат. В данном примере произошла передача данных от javascript к php и обратно, но без проверок, это было сделано специально, чтобы не усложнять и настроить коннект. В некоторых случая, когда нужно просто подгрузить данные, в фоновом режиме, этого может оказаться достаточно. Ссылка, на скачивание архива с примером, описанного выше.

Скачать пример

Если удалось запустить файл из примера и посмотреть в консоле браузера результат, можно двигаться дальше.

Чуть сложнее

В реальности, загрузка данных происходит при наступлении какого-то события, например нажатие на кнопку, или ввод символов с троку поиска. Усложним пример, добавив обработчик на кнопку и подгрузку в div данных с сервера.

Модифицируем файл index.php, добавим кнопку,

, куда будем выводить результат и немного перепишем js, отредактируйте Ваш index.php, чтобы он стал такого содержания:

<!doctype html>
<html lang=ru>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Ajax php</title>
</head>
<body>
<button id="testAjax" type="button">Загрузить данные</button>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $(document).on("click", "#testAjax", function() {

        $.post("script.php", {dataReq: 5}, function(data)
        {
            $("#result").text(data);
        });

    });

</script>
</body>
</html>

Также немного изменим файл script.php, его новый код:

<?php

echo $_POST["dataReq"] + 25;

?>

Теперь мы по клику передаем число 5, на сервере к пришедшему числу прибавляется 25 и выводится под кнопкой число 30. То есть, происходит отправка данных, модификация и отображение. По ссылке ниже, можно скачать новый пример:

Скачать пример 2

Передача и прием объектов

Наиболее распространенным данными, при передачи Ajax являются объекты, например в формате JSON. В следующем примере разберем вариант, где будем передавать данные из поля input, на сервере будем обрабатывать приходящие данные и отправлять назад массив php преобразованный в JSON объект и наполнять из него тег select, в зависимости от отправленного числа. Для этого модифицируем файл index.php, его новый код будет таким:

<!doctype html>
<html lang=ru>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test Ajax php</title>
</head>
<body>
<label for="numReq">Введите число от 1 до 5: </label>
<input type="text" id="numReq" name="numReq">
<button id="testAjax" type="button">Отправить</button>
<br>
<select id="resReq">
    <option selected="selected" disabled="disabled">Не выбрано</option>
</select>
<div id="result">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $(document).on("click", "#testAjax", function() {

        //очищаем список, от предыдущих результатов

        $("#resReq .dinElem").remove();

        // получаем значение из поля input
        let inputData = $("#numReq").val();

        $.post("script.php", {dataReq: inputData}, function(data)
        {
            // проверка, не пришел ли нам 0, а значит запрашиваемый элемент есть
            if(data != 0){

                //преобразуем данные в объект
                let dataToSelect = JSON.parse(data);

                //цикл по объекту, наполнение тега select

                for (let option in dataToSelect) {

                    $("#resReq").append(`<option class="dinElem">${dataToSelect[option]}</option>`);

                }

            // иначе выведем сообщение, что Ничего не найдено!
            }else{

                $("#result").text("Ничего не найдено!");

            }

        });

    });

</script>
</body>
</html>

В js добавилась проверка приходящего результата, если он не равен 0, то в цикле наполняем тег select. Если же нам придет в ответе 0, это означает, что такого списка нет, так как нет такого ключа в массиве на сервере, (см. ниже описание под обновленным кодом script.php). В коде js добавил комментарии, за что отвечает та или иная строка.

Также модифицируем файл script.php, его новый код будет таким:

<?php

$arrToSend = array(
    1 => array(
        1 => "Автомобиль",
        2 => "Лодка",
        3 => "Дом",
        4 => "Коробка",
        5 => "Самокат",
        6 => "Мотоцикл",
        7 => "Автобус",
        8 => "Баржа",
    ),
    2 => array(
        1 => "Роза",
        2 => "Фиалка",
        3 => "Тюльпан",
        4 => "Ромашка",
        5 => "Ирис",
    ),
    3 => array(
        1 => "Ресторан",
        2 => "Магазин",
        3 => "Кафе",
        4 => "Бистро",
        5 => "Пекарня",
        6 => "Палатка с пирожками",
    ),
    4 => array(
        1 => "Красный",
        2 => "Синий",
        3 => "Белый",
        4 => "Оранжевый",
        5 => "Зеленый",
        6 => "Фиолетовый",
        7 => "Черный",
        8 => "Желтый",
        9 => "Серый",
        10 => "Розовый",
        11 => "Голубой",
    ),
    5 => array(
        1 => "Австралия",
        2 => "Индия",
        3 => "Китай",
        4 => "Япония",
        5 => "Испания",
    ),
);

$param = $_POST['dataReq'];

if(array_key_exists($param,$arrToSend)){
    echo json_encode($arrToSend[$param],JSON_UNESCAPED_UNICODE);
}else{
    echo 0;
}

?>

В нем добавился массив, с элементами, и обработка данных из запроса, в переменную $param сохраняем то, что пришло у нас от javascript, затем при помощи конструкции if else и встроенной функции array_key_exists проверяем есть ли такой ключ в массиве $arrToSend, если есть, то трансформируем вложенный массив, по этому ключу при помощи функции json_encode в формат JSON и отправляем, если же ключа в основном массиве нет, то просто отправляем 0, это нужно для проверки на стороне js.

Результат этого примера должен быть такой, как на gif-ке ниже:


результат примера 3 ajax

Скачать пример 3

Ссылка на оф. сайт Jquery, документация по функции $.post, которая используется в статье. https://api.jquery.com/jquery.post/

Статья в ближайшее время будет дописана, с большим количеством примеров.

Добавить комментарий

Ваш адрес email не будет опубликован.