Javascript в php

Как использовать переменные PHP в JavaScript

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

Переменные PHP в JavaScript

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

После того, как загрузка страницы завершена, вы больше не контролируете ее (за исключением случая, когда у вас есть сервер на основе временных операций). Но если во время загрузки страницы вы передаете переменные PHP в код JavaScript, то можно продолжать использовать их внутри скриптов JS и управлять отображением страницы и ее динамическим поведением.

Теперь рассмотрим, как можно передать переменные из JavaScript в PHP или наоборот.

Как передать переменные PHP во встроенный JavaScript

Существует два основных метода включения кода JavaScript на странице HTML. Первый — мы располагаем код на той же странице, в разделе <head> или в <body>. Предположим, у нас есть встроенный код JS в разделе <head>, и мы хотим передать переменную PHP username в JavaScript. В этом случае мы нужно использовать следующий код:

<!doctype html> <html> <head> <script> var username = "<?php echo $username ?>"; alert(username); </script> </head> <body> … </body> </html>

Мы определили в JS новую переменную и назвали ее username. Затем присвоили этой переменной JS PHP переменную $username, повторив ее. Естественно, переменная $username должна быть определена ранее на странице выше данной строки.

Обратите внимание, что вокруг кода PHP, который выводит $username, мы использовали двойные кавычки («) как при объявлении переменной в JS. Если переменная PHP является числом, то кавычки использовать не нужно. Но убедитесь, что вы правильно использовали кавычки, потому что строка вывода также может содержать кавычки, и это разобьет код JS.

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

Также JS код может храниться во внешнем файле (например, script.js), связанном со страницей HTML. Например, если вы хотите передать значение переменной времени (в секундах) в таймер JS, можно использовать следующий код:

<!doctype html> <html> <head> <script> var seconds = <?php echo $seconds ?>; </script> <script src="script.js"></script> </head> <body> … </body> </html>

Код во внешнем файле JS (script.js):

setTimeout(function() { window.location.href = "/"; }, seconds * 1000);

В приведенном выше коде мы сначала инициализируем значение PHP переменной $seconds переменной JS seconds. После этого переменная становится доступной в DOM, и подключаемый скрипт (script.js) может использовать ее. В приведенном выше примере пользователь перенаправляется на главную страницу после установленного промежутка времени.

Совет: Убедитесь, что в PHP и JavaScript вы определили переменные до того, как используете их в коде. Иначе вы получите сообщение об ошибке «undefined variable«, и код работать не будет.

Надеюсь, эта статья окажется полезной, и вы поделитесь ею с друзьями.

Перевод статьи «How to Include PHP Variables in JavaScript» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Взаимодействие PHP и JavaScript

Автор: Артемьев Сергей Игоревич
ICQ: 438856621
email: _spin_@bk.ru

Язык PHP предназначен для написания скриптов, которые выполняются на стороне сервера, а в браузер клиента отправляется не сам скрипт, а только результаты его работы. Это означает, что пользователь, загрузивший страницу вашего сайта, никогда не увидит исходный код скрипта и может даже не догадываться, что страница создана динамически.

В свою очередь, на языке JavaScript создаются исключительно клиентские скрипты, которые исполняются в браузере клиента. Для сервера скрипты JavaScript – это обычные текстовые данные, ничем не отличающиеся от прочего содержимого страницы.

Различаются языки и по уровню безопасности. При выполнении PHP-скрипта вы можете обращаться к файловой системе сервера, базам данных и другим внешним объектам, на которые вам предоставили права администраторы. А вот JavaScript ограничен только встроенными объектами браузера и с их помощью вы не сможете читать или писать непосредственно на диск. Сделано это в первую очередь для защиты от злоумышленников, т.к. если разрешить доступ скриптам к системной информации и файлам – обязательно найдётся умелец, который напишет код, скрытно отсылающий ваши файлы кошельков,  логины, пароли и другую закрытую информацию на адрес умельца.

Помимо прочего, протокол HTTP, по которому передаются все веб-страницы, не поддерживает постоянных соединений, т.е. браузер подключается к серверу, запрашивает страницу, получает данные и немедленно отключается. Это означает, что все скрипты PHP завершаются ещё ДО того, как начнутся выполняться скрипты JavaScript.

Таким образом, сам собой напрашивается вывод: прямое взаимодействие скриптов на PHP и JavaScript попросту невозможно.

Но не всё так фатально, косвенное взаимодействие мы обеспечить всё-таки можем. Для передачи данных между клиентской и серверной стороной можно использовать один из трёх вариантов:

  1. Внесение изменений в текст страницы (в скрипт);
  2. Использование Cookies;
  3. Использование Ajax;

Первый способ пригоден только для передачи данных и параметров с сервера на клиент.

Как использовать переменные PHP в JavaScript

Суть метода проста: при генерации страницы необходимые параметры зашиваются прямо в текст скрипта.

<html> … <script type=”text/javascript”> <?php If ( $login == ”admin” ) echo “var isAdmin=true” else echo ”var isAdmin=false” ?> If(isAdmin) Document.write(“Im Administrator”); Else Document.write(“Im user”); </script> …

В этом примере мы на этапе формирования страницы вписываем в неё заданную переменную с нужным нам значением. Работает это так:

  1. От пользователя поступает запрос на получение страницы.
  2. Запускается PHP и начинает выполнять соответствующий скрипт.
  3. В процессе выполнения скрипт создаёт HTML-страницу, содержащую скрипт JavaScript. Как я уже упоминал раньше, создаваемая веб-страница с точки зрения сервера – обычный текст, который можно перед отправкой пользователю править как угодно.
  4. Готовая страница передаётся в браузер пользователя.
  5. По окончании загрузки страницы в браузер начнёт выполнение наш JavaScript. При этом скрипт не будет «знать», каким образом он составлен – вручную программистом или автоматически скриптом. Главное – скрипт должен быть синтаксически верен и работоспособен.

Второй способ несколько сложнее, но позволяет передавать параметры как со стороны сервера, так и со стороны клиента. Суть в том, что и PHP и JavaScript позволяют читать и сохранять cookies (подробнее про cookies рассказывалось в одном из предыдущих уроков). Например (условный):

<html>

<?php // при выполнении скрипта на сервере сохраняем // данные в cookie setcookie(…); ?> <script> // а этот фрагмент будет выполнен после // загрузки страницы // надо лишь считать cookie getcookie(…); </script>

Здесь мы на стороне сервера устанавливаем cookie с необходимыми нам параметрами. При этом клиенту посылается специальным образом сформированная команда и данные, т.е. все cookie передаются ДО передачи основной страницы. Это значит, что все установленные сервером cookie будут доступны после загрузки страницы, а значит и при выполнении скриптов JavaScript.

Аналогично и для обратной передачи: все cookies, установленные из JavaScript, будут переданы на сервер при первом же обновлении страницы.

Основной недостаток этого метода – ограничение на размер передаваемых данных. Максимальный размер одного cookie не может превышать 4Кб, а у некторых пользователей возможность установки cookies вообще отключена. Так же этот способ создаёт большой дополнительный трафик, т.к. все cookies автоматически отправляются на сервер при каждом обновлении страницы.

У обоих методов взаимодействия есть два общих недостатка:

  1. Все обновления и изменения происходят только при загрузке/обновлении страницы. Это очень неудобно, особенно когда приходится заполнять громоздкие и сложные формы с динамическим содержимым, когда состав и содержимое полей изменяется в зависимости от уже введённых данных.
  2. Программист должен достаточно хорошо разбираться как в PHP, так и в JavaScript, чтобы грамотно написать клиентские и серверные скрипты.

Последний способ взаимодействия – AJAX. Это наилучший, пусть и не самый простой способ. Ajax – это комбинированная технология, использующая все преимущества PHP и JavaScript, позволяя изменять и обновлять данные на страницах вашего сайта «на лету», т.е. без перезагрузки страницы.

Для использования Ajax обычно создаётся так называемые "frontend" и "backend". Backend – это PHP-скрипты, выполняющиеся на сервере. Обычно такие скрипты возвращают структурированные блоки данных (массивы), не содержащие никакого оформления.

Frontend – это скрипты JavaScript, выполняющиеся в браузере пользователя. Основное их назначение – вызвать требуемый скрипт backend`a, получить данные и правильно их вывести на странице, добавив при необходимости обрамление из тегов и стилей.

Подробнее об использовании Ajax вы можете прочитать в соответствующем уроке по JavaScript на этом сайте.

Таким образом, взаимодействие PHP и JavaScript наладить всё-таки можно, но для этого надо хорошо разбираться в обоих языках. Из собственного опыта могу сказать, что для домашних страничек и небольших сайтов проще всего применять первый способ (прямую запись текста скрипта). Для проектов покрупнее или динамичнее – Ajax. А вот от третьего способа я бы рекомендовал вам воздержаться, т.к там слишком много подводных камней и условностей, таких как размер cookie, их поддержка браузерами, формат данных, кодировка и т.п.

В начало страницы

В начало страницы

Почему вопрос о передаче переменной из языка в язык — вопрос новичка? Потому что невозможно это сделать! Языки программирования работают каждый самостоятельно. А передача напрямую между ними невозможна. Сейчас объясню почему.

Дело в том, что PHP и JavaScript связаны лишь условно. PHP работает на сервере, а JavaScript — в браузере.

Напомню алгоритм работы интернета.

Как передать переменную из JavaScript в PHP

То есть, что происходит, когда вы запрашиваете адрес. Например, что должно произойти чтобы выполнилась JavaScript функция на странице http://dayte2.com.

  1. Браузер формирует заголовки запроса, присоединяет к в них какую-то важную информацию о себе и отсылает их на этот адрес.
  2. Сервер принимает заголовки и понимает что нужно отдать документ. Он понимает, что запрашивается не документ, а программа. Тогда он запускает эту программу и отдает ей все данные, что получил от браузера.
  3. Программа (php-скрипт) запускается, отрабатывает и просто печатает результат своей работы. Результатом работы может быть html-страница, куда включены JavaScript-скрипты. Но мы помним, что в данный момент работает PHP и JavaScript для него ничем не отличается от любых других данных. Просто буковки.
  4. Сервер получает то, что напечатала программа. Прикрепляет заголовки ответа и отсылает все это запросившему браузеру.
  5. Браузер получает код страницы и отображает его. Догружает нужные файлы (js, css, картинки), применяет их к html-коду. И только теперь включается JavaScript, встроенный в браузер.

Если посмотреть внимательно на этот порядок работы, можно ответить на вопрос

Как передать переменную из PHP в JavaScript?

Нужно во время выполнения скрипта PHP просто сформировать такой текст, чтобы он потом мог выполниться в браузере. Например.

Если вы создадите файл php с таким содержимым и запустите его из браузера — вы увидите пустую страницу и сообщение alert.

Разумеется, нужно помнить, что синтаксис должен быть JavaScript. Фактически, когда мы формируем код JS на PHP — мы должны помнить, что сначала php что-то сгенерирует и это что-то должно быть валидным JS.

В данном случае наш php-скрипт формирует строку:

А это — вполне корректный JavaScript, который будет выполнен браузером.

Как передать переменную из JavaScript в PHP?

Можно догадаться, тут дела обстоят труднее. Ведь php генерирует JS, а вот обратная связь не подразумевается особо. Так что хочешь-не хочешь, а придется формировать новый запрос к серверу, передавая в нем данные для скрипта. У нас есть два основных метода передачи данных. Реализация может быть как через синхронные, так и через асинхронные запросы. Синхронные вызовут перезагрузку страницы, а асинхронные используют Ajax.

Синхронный метод передачи данных в php из JavaScript

Этот код немедленно перенаправит пользователя по адресу http://dayte2.com/index.php?message=Hello%2C%20server!

PHP-код в файле index.php получит данные из GET и сформирует суперглобальные массивы.

Асинхронная передача переменной из JavaScript в PHP

Это подразумевает использование Ajax. По сути, осуществляется то же, что и в предыдущем случае, но не перезагружается страница браузера. Проще всего это проиллюстрировать используя библиотеку jQuery.

Как видим, все еще проще. Не нужно применять функцию encodeURIComponent, ее применяет за нас jQuery. Мы описываем функцию, которая принимает ответ сервера и складывает его в переменную data. Если index.php возвращает просто значение переменной $_GET[message], то мы увидим alert с текстом «Сервер ответил: Hello, server!».

Передача сложных объектов из php в Javascript

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

Тут можно начать путаться. Но ничего страшного нет. Достаточно помнить последовательность. Сперва выполняется php, затем — JavaScript. После выполнения php получится:

Что при выполнении выведет нам alert с текстом ‘123’.

Итого

Нужно помнить что php генерирует JS, поэтому передавать из него данные довольно просто. Нужно формировать JS так же, как формируется html. С соблюдением синтаксиса JavaScript.

Для передачи данных из JS в PHP всегда используется дополнительный запрос. Как он осуществляется — дело десятое. Например, может формироваться и отправляться форма. Или открываться iframe. Но суть остается. Понимая эту суть, можно перекидывать любые данные из браузера на сервер и обратно довольно просто.

Понравилась статья? Поставь плюс один!

Теги: phpJavaScript

← Предыдущая статьяСледующая статья →

Как передать переменную из JavaScript в PHP

Автор статьи: Сергей Каминский

Многих начинающих веб-программистов интересует вопрос, как передать переменную из JavaScript в PHP? И еще больше программистов не могут понять, зачем это вообще нужно. Ответ на второй вопрос каждый найдет для себя сам, а я сейчас обьясню как это работает.

Поскольку JavaScript выполняется на стороне пользователя, а PHP на стороне сервера, то значение не может быть передано напрямую. Поэтому результат выполнения кода JavaScript мы передадим в PHP через протокол HTTP. Мы рассмотрим несколько способов, и каждый сам решит какой способ ему использовать.

Способ первый

Необходимо разместить в странице нужный JavaScript-код или сгенерировать его на стороне сервера, как это описано в руководстве по PHP, и передать в браузер пользователя. В этом примере мы определим ширину и высоту экрана пользователя:

Если браузер пользователя поддерживает JavaScript, то после выполнения скрипта страница обновится и мы увидим в адресной строке запрос:

Знак ? после имени скрипта указывает веб-серверу что мы хотим сделать GET-запрос к нашему PHP-скрипту, после него идет имя нашей переменной и знак равенства, который присваивает переменной следующее за ним значение, определенное JavaScript-функцией.

PHP и JavaScript

Знак & служит разделителем для переменных в запросе. В результате в PHP будут переданы две переменные: $width со значением равным ширине экрана (1024) и $height со значением равным высоте экрана (768).

А на экране увидим результат выполнения скрипта. Например:


Полученный результат: ширина и высота экрана пользователя

Способ второй

Пишем код JavaScript и выполняем его на стороне пользователя, а потом передаем результат через HTTP-протокол в PHP:

Здесь мы присвоили переменной query запрос со значениями ширины и высоты экрана пользователя, как и в предыдущем примере. В результате выполнения этого кода переменной query будет присвоена строка width=1024&height=768 (при разрешении экрана 1024х768).

Теперь нам нужно передать переменную query из JavaScript в PHP. Передавать запрос будем PHP-скрипту с именем script.php. Для этого мы воспользуемся HTML-тегом <img />, который вставляет изображения в HTML-страницу. Вместо картинки мы укажем имя нашего PHP-скрипта и присоединим к нему переменную query с запросом:

Таким способом можно передавать запросы любому скрипту. Результат выполнения этих двух блоков JavaScript-кода браузер пользователя превратит в следующий HTML-код:

Браузер обратится к серверу за картинкой по указанному адресу и, в результате, сделает GET-запрос к script.php с нужными нам параметрами. Теперь мы можем обработать полученные переменные в нашем script.php:

Способ третий

Данные будут переданы PHP-скрипту после нажатия пользователем на ссылку:

или на кнопку в форме:

В случае использования формы каждую переменную необходимо передавать в отдельном поле. Мы использовали скрытые поля формы, имена которых соответствуют именам переменных в нашем PHP-скрипте. Или же можно вообще не использовать текстовые поля, а передать все данные через параметр action=»» нашей формы:

Заключение

Первый способ не очень удобен, так как браузеру после обработки кода JavaScript нужно обновить страницу, передав PHP-скрипту полученные данные. При использовании второго способа передача данных из JavaScript в PHP проходит незаметно для пользователя без обновления содержимого страницы. Третий способ дает такой же результат, как и первые два, но требует нажатия ссылки или кнопки пользователем. Какой способ лучше использовать? Все зависит только от поставленной задачи.

Любой из этих способов можно использовать для того, чтобы передать значение из JavaScript не только в PHP, но и в Perl, ASP или в любой другой язык программирования, который выполняется на стороне веб-сервера.

Другие записи по теме в разделе статьи по PHP и MySQL

Копирование статьи запрещено.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *