Как использовать переменные PHP в JavaScript. JavaScript — вывод информации Как передать переменные PHP во внешний JavaScript
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
Передача значений переменных из JavaScript в PHP и обратноВ этой небольшой статье мы рассмотрим с вами один интересный момент, касающийся передачи значений переменных.
Иногда возникает необходимость использовать значение PHP-переменной в JavaScript-сценарии , либо наоборот: есть JavaScript-переменная, значение которой нам нужно использовать в PHP-скрипте .
В этом уроке мы рассмотрим простые примеры, которые позволят вам понять общий механизм того, как это можно реализовать.
Для определенности, предлагаю вам создать на локальном компьютере хост с именем php_js и разместить там файл index.php , в котором мы и будем рассматривать наши примеры.
Каркасом файла index.php будет простая HTML-разметка:
Передача значений переменных
Для большей наглядности весь код (включая JavaScript) мы будем писать внутри тэгов body .
1. Передача значения PHP-переменной в JavaScript
Давайте напишем такой код в тэге body :
1. Из PHP в JavaScript:
var userName = ""; document.write("Значение PHP-переменной: " + userName);Итак, у нас есть PHP-переменная с именем name и значением Юрий , и наша задача состоит в том, чтобы это значение вывести на экран, но не средствами PHP, а с помощью JavaScript.
Для этого мы открываем как обычно блок JavaScript-кода и внутри него объявляем переменную с произвольным именем (в нашем случае - userName ). Теперь мы этой переменной присваиваем в качестве значения результат работы оператора echo применительно к переменной name .
Как вы видите, мы делаем это в блоке PHP-кода, который открываем и закрываем в пределах одинарных кавычек, обрамляющих строковое значение переменной userName в JavaScript-сценарии.
Таким образом, мы с помощью языка PHP формируем синтаксически верный код JavaScript, который будет корректно выполнен.
В результате выполнения этой строки в переменную userName попадет значение Юрий .
Вот и все. Значение PHP-переменной name было передано в JavaScript-переменную userName .
Теперь нам нужно только убедиться, что в нашей JavaScript-переменной userName хранится ожидаемое значение. Для этого мы выводим значение данной переменной на экран с помощью document.write .
2. Передача значения JavaScript-переменной в PHP (метод GET)
Здесь, как вы понимаете, ситуация у нас обратная. В наличии есть JavaScript-переменная, и ее значение нужно каким-то образом передать в PHP-сценарий.
Понятно, что эта задача несколько сложнее, ведь если в первом случае (передача значения PHP-переменной в JavaScript) у нас уже была PHP-переменная, значение которой мы просто вывели внутри JavaScript-кода, то здесь такой вариант не пройдет.
Ведь PHP-скрипт ничего не знает о том, что у нас создана некая JavaScript-переменная. И не узнает он об этом до тех пор, пока мы не отправим серверу GET или POST-запрос, в котором будет фигурировать значение JavaScript-переменной.
Вот тогда, уже на следующем запросе, мы сможем получить доступ к значению этой JavaScript-переменной из PHP-сценария.
Под уже существующим кодом допишем следующее:
2. Из JavaScript в PHP (метод GET):
var userName2 = "Дмитрий";Внутри блока JavaScript-кода мы создаем переменную userName2 со значением Дмитрий .
Здесь наша задача состоит в том, чтобы средствами PHP создать корректный JavaScript-сценарий, который перезагрузит текущую страницу и одновременно с этим передаст файлу index.php через адресную строку (т.е. методом GET) значение, содержащееся в JavaScript-переменной userName2 .
Для этого мы выводим на страницу открывающий блок JavaScript-кода с помощью опрератора echo , внутри которого задаем средствами JavaScript перезагрузку текущей страницы (document.location.href ).
В качестве адреса страницы мы используем значение элемента REQUEST_URI из глобального массива $_SERVER и добавляем к нему параметр с именем u_name и значением, равным значению переменной userName2 .
В итоге наша условная конструкция if-else работает следующим образом:
1. Если при обращении к странице index.php в глобальном массиве $_GET есть элемент с индексом u_name (т.е. успешно сработала переадресация средствами JavaScript), то мы выводим на экран значение переданной JavaScript-переменной.
2. Если же при обращении к странице index.php в глобальном массиве $_GET нет элемента с индексом u_name , то запускается JavaScript-сценарий, выведенный средствами PHP и производит переадресацию на эту же страницу, но уже с параметром u_name , имеющим значение переменной userName2 (об этом мы говорили чуть выше).
Теперь, при обращении к index.php мы получим вот такой результат:
Как видите, в адресну строку средствами JavaScript мы передали значение переменной userName2 . Вследствие этого в массиве $_GET появился элемент с индексом u_name и значением Дмитрий .
Задача решена, и теперь мы можем как угодно манипулировать полученным значением в рамках PHP-сценария, что мы и сделали, воспользовашись выводом на экран значения элемента u_name из массива $_GET .
В исходном коде сформированной страницы мы увидим при этом следующую картину:
С этим моментом мы также разобрались, и остался еще один вариант.
3. Передача значения JavaScript-переменной в PHP (метод POST)
В предыдущем примере мы рассмотрели способ передачи значения с использованием адресной строки браузера (методом GET ).
Сейчас же мы рассмотрим вариант с передачей значения без использования адресной строки, т.е. методом POST .
В этом примере мы будем использовать форму для того, чтобы отправить данные на сервер методом POST .
Под уже существующим кодом напишем:
3. Из JavaScript в PHP (метод POST):
var userName3 = "Александр";Значение JavaScript-переменной:
Начало у нас похожее: в блоке JavaScript-кода мы объявляем переменную с именем userName3 и значением Александр .
После этого переходим к PHP-коду. Мы видим, что в ветке if проверяется существование в глобальном массиве $_POST элемента с индексом u_name .
Если данный элемент будет найден, то он будет выведен на экран и будет закрыт тэг параграфа для всего предложения.
В случае отстутствия данного элемента в массиве $_POST управление передается ветке else .
Для этого мы выводим на страницу открывающий и закрывающий блоки JavaScript-кода с помощью опрератора echo , и внутри них формируем синтаксически верный JavaScript-код.
Наша задача сводится к тому, чтобы, используя команду вывода document.write в JavaScript, вывести на страницу обычную HTML-форму и подставить в единственное ее текстовое поле с именем u_name значение, которое хранится в переменной userName3 (Александр).
Самое сложное здесь - не запутаться в кавычках и их экранировании.
Именно поэтому перед написанием подобных скриптов я рекомендую вам сперва создать отдельный файл и написать в нем чистый JavaScript-код , который бы выводил форму и подставлял в поле значение переменной userName3 .
Когда вы с этим справитесь, то можете возвращаться к исходному файлу и задача ваша будет заключаться в том, чтобы в точности вывести тот код, который вы написали чуть раньше. На этот раз - уже средствами PHP.
Именно это мы и делаем в ветке else . Обратите внимание, что текст для вывода (предназначенный для оператора echo ) заключен в двойные кавычки. Соответственно, для конструкции document.write мы используем одинарные кавычки.
Это обстоятельство приводит к тому, что нам нужно проэкранировать все символы одинарных кавычек, которые находятся между открывающими и закрывающими одинарными кавычками, ограничивающими вывод строки для конструкции document.write .
Если сейчас обратиться к странице index.php , то результат будет следующий:
Как вы видите, после фразы "Значение JavaScript-переменной:" идет пустота, т.е. пока еще PHP-сценарий не получил значение JavaScript-переменной userName3 . И это понятно - ведь еще не было запроса к серверу, в котором могла быть передана эта информация.
При этом ниже в форме у нас находится слово Александр - как раз значение JavaScript-переменной userName3 .
Мы вставили его сюда как раз для того, чтобы отправлить форму и передать значение этой переменной методом POST нашему текущему скрипту index.php (если атрибут action отсутствует, то данные будут переданы текущему скрипту).
После нажатия на кнопку отправки мы увидим такую картину:
Теперь форма у нас исчезла, т.к. уже отрабатывает ветка if , и вместо нее выводится значение переменной.
Ну что ж, с этой задачей мы тоже справились - значение JavaScript-переменной userName3 мы передали в PHP-скрипт и вывели его на экран из массива $_POST .
На этом данную небольшую статью я завершаю. Очень надеюсь, что она поможет вам понять базовые принципы передачи значений переменных из JavaScript в PHP и обратно.
А затем мы посмотрели как обрабатывать события пользователя . В этот раз мы собираемся рассмотреть, как получить одни данные, введенные пользователем, и соединить их другими, чтобы сделать простую страницу, приветствующую вас.
examples/js/pure_js_greating.html
Hello World First name: Last name: Say hi! function say_hi() { var fname = document.getElementById("first_name").value; var lname = document.getElementById("last_name").value; var html = "Hello " + fname + " " + lname; document.getElementById("result").innerHTML = html; } document.getElementById("say").addEventListener("click", say_hi); Try!
В этом примере у нас немного больше HTML, чем раньше. Кроме button и div , где мы будем показывать наши результаты, у нас также есть два элемента input . Каждый со своим ID.
В коде JavaScript у нас есть функция say_hi . Она использует метод getElementById , который мы рассмотрели ранее, чтобы получить DOM элемент, представляющий input с id first_name . Возвращенный объект имеет метод value , который вернет текст, введенный пользователем в это поле.
Мы применяем этот способ для получения содержимого обоих элементов input и присваиваем полученные значения двум переменным: fname и lname .
Затем, используя эти переменные, мы создаем HTML-сниппет и присваиваем его новой переменной html .
Потом мы устанавливаем атрибут innerHTML (как мы делали это ранее) чтобы показать сгенерированный HTML. Результат может выглядеть вот так:
Громоздкое создание HTMLДаже в таком простом HTML мы должны использовать + несколько раз, и код получается достаточно нечитаемый. Представьте, что бы произошло, если бы мы захотели создать более сложное приложение, где мы бы хотели генерировать списки элементов или даже таблицы. Генерация HTML на лету и вставка его в DOM была бы довольно неприятной.
В бекенде, написанном на Perl, Python или Ruby, люди сталкивались с теми же самыми проблемами. Решением было создание различных шаблонизаторов. В принципе, шаблон это HTML сниппет с некоторыми плейсхолдерами (ключевыми словами), некая функция получает этот HTML сниппет (шаблон) в качестве параметра, а также несколько пар ключ-значение. Затем функция возвращает новый HTML сниппет, в котором плейсхолдеры заменены полученными значениями подходящих ключей.
Здравствуйте, в прошлой статье мы рассматривали синтаксис языка JavaScript. Мы узнали что такое циклы, переменные, массивы, логические операторы, функции и так далее.
Все эти операции проходят внутри страницы и никак не отображаются. Сегодня же мы научимся выводить необходимые данные на экран. Выводить будем обычную числовую переменную с помощью ActionScript, самыми разными способами.
Для того чтобы использовать все способы, которые будут указаны ниже, нам необходимо обращаться к объекту document. Это отдельный элемент языка JavaScript, который предназначен для работы с веб-сайтами.
Первый способ: функция writelnДля вывода переменной таким образом нам необходимо её создать. Напишем такую строку: var message = «Hello World!».
Теперь поговорим о функции writeln. Её лучше всего использовать только при загрузке исходного варианта страницы, так внутренний контент будет изменен.
С помощью таких функций как writeln можно создать страницу, полностью написанную на JavaScript. Кроме этого, данная функция может быть полезна в том случае, когда необходимо уменьшить количество запросов с сервера.
Для того чтобы воспользоваться данной функцией, записываем команду document.writeln, в скобках записываем название нашей переменной, которое затем будет показано на экране.
Обратите внимание! Большинство инструкций для работы с веб-страницей являются составляющими пространства имен document, поэтому его необходимо вписывать перед самой функцией, через точку.
Второй способ: функция alertОна не входит в пространство имен document, как writeln, поэтому его вписывать не нужно. Alert может отлично подойти для отладки кода веб-страницы. Его можно использовать и для взаимодействия с пользователем, но делать это не рекомендуется.
Alert имеет стандартный синтаксис любой JavaScript функции. Сначала записываем команду alert, в скобках записываем значение или переменной.
После этого в верхней части страницы всплывет окно с сообщением для пользователя, которое содержит кнопку «OK».
Данная функция может иметь множество применений, но не стоит злоупотреблять ей при работе с веб-сайтом, так как всплывающие окна могут вывести пользователя из себя. Кроме того, некоторые плагины блокируют функции типа alert.
JAVA
var message = «Hello World!»; document.writeln(«message»); alert(«message»); document.getElementById(«hl»).innerHTML = «message»
Скопировать
Третий способ: функция getElementByIdЭто самый сложный и наиболее популярный способ вывода информации на экран. С его помощью вы сможете изменять текстовый контент вашей HTML страницы.
Как мы знаем — все HTML теги могут иметь идентификаторы. Именно к ним и обращается наша функция. GetElementById находит элемент по его ID, изменяет содержимое тега по желанию, при этом остальной контент остается без изменений.
Данная функция входит в пространство имен document, что требует указывать его перед самой функцией.
Как вы могли заметить, кроме getElementById присутствует непонятная команда innerHTML, после него идет знак равенства и текстовая строка. Так вот, эта команда, вместе со знаком равенства, находит определенный тег и «приравнивает» его содержимое строке в кавычках.
Данный метод лучше всего подходит для вставки текста через JavaScript, поскольку он имеет целый ряд преимуществ:
В этой статье мы поговорили с вами о том, как выводить информацию на экран. Это можно сделать с помощью сообщений, а также меняя внутренний контент веб-страницы. Мы лишь немного затронули пространство имен document, которое имеет целый ряд функция для работы с веб-страницей. В следующих уроках мы ознакомимся с ними детально.
Можете самостоятельно экспериментировать с вышеописанными функциями, либо же скачивайте наши исходники. Удачи в изучении!
Переменные в JavaScript являются контейнерами для хранения различной информации.
Переменные JavaScriptJavaScript переменные являются "контейнерами", в которые Вы можете загружать различную информацию, а позднее извлекать ее обратно.
Каждая JavaScript переменная должна иметь собственное уникальное имя, которое может начинаться с латинской буквы или символа "_".
Обратите внимание: имя переменных в JavaScript не может начинаться с цифр.
Обратите внимание: так как JavaScript чувствителен к регистру, переменные с одинаковыми именами написанными в разном регистре (например var и VAR), будут являться разными переменными.
Создание переменныхСоздание переменных в JavaScript часто называют "объявлением" переменных.
Переменные в JavaScript объявляются с помощью команды var .
//Создаем переменную с именем ex1 var ex1; //Создаем переменную с именем ex2 var ex2;
Созданные выше переменные будут пустыми то есть мы создали контейнеры, но не загрузили в них никакие значения.
Значения могут загружаться в контейнеры также прямо в момент создания как в примере ниже:
//Создаем переменную с именем ex1 содержащую значение 4 var ex1=4; //Создаем переменную с именем ex2 содержащую значение 5 var ex2=5;
Для того, чтобы извлечь значение из созданной ранее переменной, необходимо обратится к ее имени.
В следующем примере мы будем извлекать содержимое переменных и сразу выводить его на страницу с помощью команды document.write.
//Запишем число 4 в переменную ex1
var ex1=4;
//Запишем число 5 в переменную ex2
var ex2=5;
//Выведем содержимое переменной ex1 на страницу
document.write(ex1+"
");
//Выведем содержимое переменной ex2
document.write(ex2+"
");
//Изменим содержимое переменной ex2
ex2=200;
//Выведем новое содержимое переменной ex2
document.write(ex2);
Быстрый просмотр
Строковые переменныеПомимо чисел Вы можете хранить в переменных произвольный текст. Переменные, которые хранят текст, называются строковыми переменными .
При записи текста в переменную обязательно заключайте его в двойные (") или одинарные кавычки (").
//Запишем в переменную ex строку "Привет всем!" var ex="Привет всем!"; //Выведем значение переменной ex на страницу document.write(ex);
Быстрый просмотр
Определение переменных с var и без негоВ JavaScript Вы можете определять переменные с var и без него.
//Создадим новую переменную с var var ex=123; //Создадим новую переменную без var ex2=20;
Вам может показаться, что объявление переменных с var и без него всегда приводят к одинаковому результату, но это действительно так только, когда когда объявление происходит в глобальном контексте (т.е. за пределами всех функций).
Если же объявление происходит в локальном контексте (т.е. в теле какой-либо функции) объявление с var создает локальную переменную (т.е. переменную, которая будет доступна только в теле данной функции и после выполнения функции будет уничтожена), объявление без var создает глобальную переменную (т.е. переменную, которая будет доступна другим функциям внутри данного скрипта).
Обратите внимание: мы подробнее поговорим о локальных и глобальных переменных далее в этом учебнике.
Об удалении и переопределении переменныхПереопределяя переменные Вы не стираете значение, которое хранятся в них.
Var ex=123; var ex; document.write(ex); // Выведет 123
Если Вы хотите удалить переменную в JavaScript и она не была объявлена с помощью var Вы можете использовать оператор delete .
Ex=123; delete ex;
Оператор delete не может удалить переменные объявленные с помощью var, поэтому если переменная была объявлена с помощью var, то единственный способ удалить ее - присвоить ей значение null или undefined.
Var ex=123; ex=null; // или ex=undefined
Сделайте самиЗадание 1 . Исправьте ошибки в коде ниже:
Задание 1
var 33var=33;
document.write(33var);
document.write("
");
var str1=Привет всем!;
document.write(str1);
document.write("
");
var vaR = 288;
document.write(var);
document.write("
");
Задание 2 . Во внешнем файле secred1.js содержится переменные sec1, sec2, sec3 и sec4, которые содержат буквы кодового слова (не по порядку). Подключите внешний файл и узнайте кодовое слово путем вывода значений переменных на страницу.