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

Всеми привет. Если вы мало-мальски делаете проекты для web, то наверняка сталкивались с задачей передать значение переменной из PHP в JavaScript. На первый взгляд нет абсолютно никаких трудностей, чтобы это сделать, если у вас небольшой кусок JS кода и вы его встраиваете напрямую в HTML. Давайте посмотрим.

PHP

1
2
3

< ?php
$a = 5; // присваиваем переменной 5
?>

JavaScript

alert(< ?=$a; ?>);

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

Передать переменную из PHP в отдельный JavaScript файл

Способов это сделать на самом деле несколько. Я покажу один из самых простых. Принцип такой: мы создаем на странице элемент, например div с любым классом и дата-атрибутом, в который и помещаем PHP переменную. Затем в JavaScript обращаемся к этому атрибуту и получаем его значение. Я думаю вы уже поняли как это работает. Давайте разберемся на примере.

HTML + PHP

1

<div class="data-php" data-attr="<?=$a; ?>"></div>

JS

1
2

var dataPphp = document.querySelector('.data-php').getAttribute('data-attr');
alert(dataPhp);

Более короткий вариант с jQuery

1
2

$dataPhp = $('.data-php').attr('data-attr');
alert($dataPhp);

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