Передача значений переменной из PHP в JavaScript / forpes.ru

Главная
Передача значений переменной из PHP в JavaScript

Передача значений переменной из PHP в JavaScript -11

13.06.2026 23:57

DangerPro 31 12000 Источник

Здравствуйте уважаемые читатели. За ранее хочу сказать, что это мой первый пост и не судите очень строго.

Сегодня пост будет посвящен передачи значений переменной PHP в JavaScript — сценарий.
Этот урок подойдет самым новичкам, тем кто только начинает заниматься Web — программированием.
Для начала создадим обычный документ index.php и его каркасом будет служить простой HTML код.

<!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8" >
	<title>Работа с переменными</title>
</head>
<body>

</body>
</html>

Весь код JavaScript и PHP будем писать в теги BODY.
PHP переменная $CITY будет равна «Ivanovo». Значение этой переменной нам нужно передать в переменную TOWN JavaScript`a.

Давайте теперь напишем следующий код в файле index.php:

<?php
$CITY = 'Ivanovo';
?>

<script type="text/javascript">
var TOWN = '<?php echo $CITY;?>';
document.write('Город невест и молодежи: ' + TOWN);
</script>

И так рассмотрим выше приведенный нами программный код. У нас есть PHP-переменная с именем CITY и значением Ivanovo, и наша задача состоит в том, чтобы это значение вывести на экран, но не средствами PHP, а с помощью JavaScript.
Для этого мы как обычно открываем теги JavaScript и объявляем переменную TOWN.

На месте присвоения JavaScript переменной TOWN, мы пишем PHP код, который выводит нашу переменную CITY.
Наступило время проверить наш код в действии.

Наш браузер выдал нам следующее:
Город невест и молодежи: Ivanovo

При просмотре исходного кода страницы мы увидим:

Из всего выше перечисленного делаем вывод, что передавать переменную из PHP в JavaScript очень просто.
Спасибо за внимание, с вами был DangerPro

Комментарии (31)

Nexoic
14.06.2026 00:10
#30107508
Что случилось с хабр ?

Я думал будет раскрыто как переменную в отдельный js файл передать, или что то интересное.

У меня культурный шок.
1. BearOff
  14.06.2026 00:10
  #30107520
  tl;dr
  И так, из всего выше перечисленного и выше приведенного за ранее делаем вывод, что для самых НОВИЧКОВ это просто - ПЕРЕДАЧИ. Программный код - это просто, для этого мы как обычно открываем теги JavaScript!
  Чтобы это значение вывести на экран.
  Спасибо за внимание, с вами был.
1. Granulex
  14.06.2026 00:10
  #30109128
  `window.Config = <?= json_encode($data, JSON_HEX_TAG) ?>` – и переменная в отдельном файле есть. Это один абзац, а не статья.

peter23
14.06.2026 00:10
#30107576
Если изменить на var TOWN = <?php echo json_encode($CITY); ?>; и объяснить почему именно так, то станет чуть менее печально.
1. maksim_bronnikov
  14.06.2026 00:10
  #30108048
  Эх, на пыхе давно писал, но можно даже так <?= json_encode($CITY); ?>
  1. Dhwtj
    14.06.2026 00:10
    #30108996
    Для числа можно и
    
    <?= $n ?>;
    
    tkutru
    14.06.2026 00:10
    #30110536
    Можно и к инту кастануть:
    
    <?= (int) $n ?>

Metotron0
14.06.2026 00:10
#30107582
А если у меня есть переменная $fn = function() { return 600;}, то её как передать? Почему не рассмотрели вариант запроса значения через fetch(), например?

wintermute2025
14.06.2026 00:10
#30107584
Странная статья - только началась и вот уже закончилась. Это точно не для Хабра.
1. Metotron0
  14.06.2026 00:10
  #30107602
  Так уж выбрана тема статьи.

Dhwtj
14.06.2026 00:10
#30107880
Смотря в какой момент передать PHP -> JS, то есть на фронт
1. При генерации страницы (PHP, server-side render):
```
echo "<span>" . $city . "</span>"; // подставится в HTML сразу
```
2. По запросу от клиента (AJAX):
```
fetch('/api/city').then(r => r.text()).then(t => TOWN = t);
```
3. По инициативе сервера (WebSocket / SSE):
```
const ws = new WebSocket('wss://...');
ws.onmessage = e => TOWN = e.data; // сервер шлёт сам
```
1. Android1983
  14.06.2026 00:10
  #30108854
  Да вот тут более развернуто, но сам как не профессионал иногда читаю книги, а потом узнаю ещё от 2 и более способов что-то сделать по другому.

ulisma
14.06.2026 00:10
#30108052
Зачем это делать на клиенте? Как-то глупо. Меня вообще выворачивает от таких костылей. Есть сервер, есть логика взаимодействия клиент-сервер, зачем такую ерунду городить.
1. TheHost
  14.06.2026 00:10
  #30108148
  Это не костыль, так писали раньше. Да и пишут до сих пор, просто автор как то без интереса, чисто один пример написал, без практики конкретной.
  
  Причин так писать много. Это может быть допустим стейт приложения. Первые гибридные приложения так и прокидывали состояние.
  1. ulisma
    14.06.2026 00:10
    #30108274
    Первые гибридные приложения так и прокидывали состояние.
    
    Да, я это помню в 2000-х. И тогда тоже не понимал этой чуши. Отправить можно запрос AJAX, да что угодно. Это убогая архитектура. Костыль самый настоящий.
    
    TheHost
    14.06.2026 00:10
    #30108298
    Запрос на что? На подгрузку данных, которые можно сразу показать?
    
    Есть определенные метрики перфоманса страницы, первичного рендера и вещи которые важны для SEO, аукциона рекламы и тд и тп. От мета тегов, до первичного контента. Это критически важно для разного рода сайтов и целей.
    
    MyraJKee
    14.06.2026 00:10
    #30108324
    Но все же так сейчас почти никто не делает. На худой конец есть шаблонизаторы, которые худо-бедно разделяют представление от бизнес-логики
    
    Хотя тут же js...
    
    TheHost
    14.06.2026 00:10
    #30108342
    Но все же так сейчас почти никто не делает.
    
    Напрямую да, но в целом любое SSR грубо говоря именно так и делает)
    
    И да сейчас даже async/await шаблонизаторы поддерживают, но итог такой же, что-то вот подкладывается в HTML и потом используется.
    Просто пост слишком базисный. Тему можно куда круче раскрывать))
    
    ulisma
    14.06.2026 00:10
    #30108350
    подгрузку данных, которые можно сразу показать
    
    Зачем тогда JS использовать для этого. Если сразу, тогда HTML.
    
    Есть определенные метрики перфоманса страницы, первичного рендера
    
    Парсинг такой как раз замедлит загрузку. Лучше сразу в JS все сделать без этих костылей - это будет быстрее, чем браузер спарсит строки, а потом это еще и JS обработает. В этом нет вообще смысла никакого.
    
    TheHost
    14.06.2026 00:10
    #30108376
    Зачем тогда JS использовать для этого. Если сразу, тогда HTML.
    
    Изоморфное приложение, стейт приложение, ssr, да даже просто jquery плагин с нужными параметрами с бека))
    
    Парсинг такой как раз замедлит загрузку.
    
    Сори про это все много чего написано. Тут нет смысла холиварить. Уже какой-то парсинг пошел)) Я выше дал направление если интересно куда копать
    
    Лучше сразу в JS все сделать без этих костылей - это будет быстрее
    
    Чтобы JS заработал он должен распарситься это верно. Но в вашей схеме только после этого пойдет ваш запрос, получит ответ, и наконец-то что-то покажет.
    
    В случае же вставкой данных в JS - распарсится и покажется. Минус серверное взаимодействие понимаете? Не говоря уже том, это может быть комплексный запрос, который затрагивает разные системы, требует каких-то данных. Их тоже на фронт отправлять, что бы потом сделать запрос на данные, которые у нас уже могли быть на беке?
    
    Не думал, что придётся это объяснять, ну))
    
    ulisma
    14.06.2026 00:10
    #30108442
    Если это комплексный запрос, тогда это точно лучше делать на стороне сервера. Вообще клиенту надо доверять по-минимуму, вы его контролируете только частично.
    
    В моей схеме выдача будет сразу того, что нужно показать быстро. Остальное распрасится, отработает и будет выведено.
    
    Этой схеме уже 100 лет. Много где грузится сначала основное и выдается пользователю, потом подгружается остальное. Не сразу все, как вы хотите. Пример - это тайлы в картах. Вы все их будете грузить сразу, да? Или товары в каталоге.
    
    Но я не наставиваю, можете делать, как хотите. Я бы такую хрень в жизни не сделал.
    
    TheHost
    14.06.2026 00:10
    #30108488
    Много где грузится сначала основное и выдается пользователю, потом подгружается остальное. Не сразу все, как вы хотите. Пример - это тайлы в картах. Вы все их будете грузить сразу, да?
    
    Я выше написал, что, когда и для чего, подходы и метрики, зачем вы опять спрашиваете.
    
    Есть то, что можно показать сразу с HTML, есть то, что можно показать сразу с JS, и есть то, что можно показать динамически с запросом, comet сервером и так далее.
    
    Каждый из способ валиден в той или иной ситуации. Если вы не встречались с этой "хренью", это не значит, что этого нет или это не нужно.
    
    ulisma
    14.06.2026 00:10
    #30108536
    Я выше написал причины, почему этот подход не только не самый лучший, но по сути - костыль. Вываливать кучу данных в HTML, среди которых может быть и что-то про уязвимости (кстати), парсить это браузером, а потом парсить JS вместо нормальной обработки на сервере и загрузки JS только тем, что ему нужно... Ну ладно, похоже дискуссия бесполезна))))))))))))))
    
    TheHost
    14.06.2026 00:10
    #30108554
    Я выше написал причины, почему этот подход не только не самый лучший, но по сути - костыль
    
    В чем костыль?
    
    Вываливать кучу данных в HTML
    
    Это вы уже придумали, не нужно вываливать туда кучу данных
    
    что-то про уязвимости (кстати)
    
    Ну вы аккуратно))
    
    парсить это браузером, а потом парсить JS
    
    Вы так и не поняли, что ваш запрос на сервер, работает после того как парсится js)))
    
    Просто почитайте как работает любое современное SSR приложение, на том же Next.js. Почитайте про gradual loading aka progressive loading, lazy loading
    
    Ну ладно, похоже дискуссия бесполезна
    
    Оставьте при себе этот гонор лол
    
    ulisma
    14.06.2026 00:10
    #30108588
    Вы так и не поняли, что ваш запрос на сервер, работает после того как парсится js)))
    
    Вы же даже не знаете, о каком запросе идет речь)))) Отвечу только на это, ибо все остальное в таком же духе.
    
    Ладно, нет желания больше переливать из пустого в порожнее. Прошу прощения, время свое ценю.
    
    TheHost
    14.06.2026 00:10
    #30108650
    Вы же даже не знаете, о каком запросе идет речь
    
    Вы выше писали
    
    Отправить можно запрос AJAX
    
    SSR может сразу вставить данные в HTML/JS, например через inline-script или JSON в шаблоне или как вот в посте.
    
    AJAX же отдельный клиентский запрос после загрузки страницы, и зачем вы развели тренд, рассказывая, что костыль, а что нет - никто не понял.
1. skymal4ik
  14.06.2026 00:10
  #30108520
  Если мне нужно передать одну-две переменных, то так гораздо проще и быстрее, чем возводить ещё один слой с дополнительными запросами и ответами, эндпоинтами, js, cors и прочим.
  1. ulisma
    14.06.2026 00:10
    #30108566
    Да, быстро и не заморачиваюясь отправить пару меременных - это и есть костыль))) Что я и имел в виду)))

PechoraDev
14.06.2026 00:10
#30108396
Эх, я уж подумал что статья будет как из php передать все данные в отдельный js файл, но увы, тут прямо для начинающих. Хотя, я и так это знаю - как передать в отдельный js файл, но почему-то подумал, что будет что-то новое

shoorick
14.06.2026 00:10
#30113566
В языках с си-подобным синтаксисом, куда относятся и JS, и PHP, принято написание СПЛОШНЫМИ_ЗАГЛАВНЫМИ для констант, а для переменных всё-таки принято использовать нижний регистр. А уж использовать ли camelCase или snake_case для имён из нескольких слов — отдельный вопрос.

likeapimp
14.06.2026 00:10
#30118118
Ахаха. Что?

4:19: чтобы написать статью на хабре у вас не хватает кармы

4:20: ...