Передать данные из javascript PHP Ajax
Передача данных от 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. То есть, происходит отправка данных, модификация и отображение. По ссылке ниже, можно скачать новый пример:
Передача и прием объектов
Наиболее распространенным данными, при передачи 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-ке ниже:
Ссылка на оф. сайт Jquery, документация по функции $.post, которая используется в статье. https://api.jquery.com/jquery.post/
Статья в ближайшее время будет дописана, с большим количеством примеров.