Архив месяца: Июнь 2020

Как передать значение переменной из JavaScript в PHP

  Александр Маврин   Один комментарий

Передача данных из JS в PHP

Всем привет. Как-то я писал статью на тему передачи значений переменных из PHP в JS и после этого меня много просили сделать материал по теме передачи данных в обратном порядке, то есть из JS в PHP. И вот наконец это свершилось, дошли руки. Скажу сразу, что в примере буду использовать jQuery, поскольку передавать данные из JS в PHP мы будет через Ajax, а на JQ это сделать проще всего. Да и нет никакого желания писать вдвое, а то и втрое больше кода на чистом JS. Поэтому извиняйте. Итак, рассмотрим вариант, в котором будет задействовано наиболее часто используемое JavaScript событие — клик по элементу. В нашем случае это будет кнопка. Для того, чтобы увидеть работу нашего скрипта, создадим HTML страницу, на которую будем выводить результат через PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<button class="" id="button">Кнопка</button>
<p class="out"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

Чтобы передать переменную из JavaScript в PHP, создадим файл js.js, в котором пропишем Ajax запрос на сервер. Главное — не забыть подключить его к странице, так же как и jQuery. И давайте напишем код.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'finc.php',
    type: 'POST',
    data: txt,
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
	console.log('ERROR');
    }
 })
})

На второй строке я создал переменную txt и поместил в нее значение Hello. Это для примера. В реальности данные обычно берутся со страницы, например из формы.

url путь к PHP файлу-обработчику
type тип передачи данных. В нашем случае POST
data какие данные передаем (указываем переменную)
success функция вывода результата запроса при успешной обработке
error функция вывода ошибки работы скрипта

И теперь давайте создадим тот самый файл func.php с незамысловатым содержанием:

1
2
3
4

< ?php 
 
$txt = $_POST['txt'];
echo $txt;

результат работы Ajax запроса на сервер

По сути ля того, чтобы передать данные из JavaScript в PHP, этого достаточно. Другое дело, если вам нужно передать большой объем информации, например массив, то здесь чуть сложнее, но принцип остается тем же. Можете посмотреть как передаются данные из все формы сразу в статье про отправку формы с сайта без перезагрузки страницы. Но давайте я покажу вам еще один пример, в котором данные будут передаваться в формате JSON из трех переменных.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).on('click', '#but', function(){
  let name = 'Вася';
  let age = 35;
  let location = 'Москва';
  $.ajax({
    url: 'func.php',
    type: 'POST',
    dataType: 'json',
    data: {
    	func: 'func_data',
    	name: name,
    	age: age,
    	location: location,
    },
    success: function(data){
     $('p.out').text('Я '+data.name+', мне ' +data.age + ' лет. Мой город: ' +data.location);
	}, error: function(){
	console.log('ERROR');
		}
	})
});

И PHP код для обработки запроса и вывода результата:

1
2
3
4
5
6
7

$func = $_POST['func'];
if ($func === 'func_data') {
	$arr['name'] = $_POST['name'];
	$arr['age'] = $_POST['age'];
	$arr['location'] = $_POST['location'];
	echo json_encode($arr);
}

В итоге мы получаем следующее:
Передача переменных из Javascript в PHP

Надеюсь, что теперь у вас появилось понимание о том, как передавать значения переменных из JS в PHP. Но все равно для этого нужна практика. Рекомендую экспериментировать на локальном сервере, а уже потом внедрять готовый код в рабочие проекты.