Передать данные из 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/
Статья в ближайшее время будет дописана, с большим количеством примеров.
Рекламный блок, для развития проекта