Как вывести переменную из js в html. Передача значений переменных из JavaScript в PHP и обратно
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. Это замечательно!
С помощью данного языка Вы сможете сделать Вашу страницу красивее, динамичнее и привлекательнее. О более конкретных возможностях языка JavaScript Вы можете прочитать на страницу описания
Что нужно знать, перед тем как начать изучение языка javaScriptДо того как начать изучение языка JavaScript Вы должны хорошо знать HTML и CSS . Если Вы не знаете этих языков, то нет смысла идти дальше. Что касается зыка PHP, то это серверный язык и перед тем как начать изучение JavaScript, знать этого языка вовсе необязательно. Языки JavaScript и PHP совсем разные и между ними нет ничего общего.
Весь код JavaScript нужно писать межу тегом script.
//Код JavaScript
Блок JavaScript кода, можно писать в html файлы или в файлы с расширением.php или же в отдельном файле с расширением.js, который потом подключается в html или php файл таким образом:
Чистый код JavaScript должен находиться перед закрывающим тегом . В других местах он просто не будет работать. Это касается и подключения отдельных js файлов.
Главная страница
Дело в том что JavaScript, сокращенно JS, работает с html тегами, и до того как начать свою работу, html теги должны быть уже загружены. Загрузка страницы идет сверху вниз.
Теперь напишем наш первый традиционный скрипт "Hello World" . Создаем html файл с произвольным названием, и как я уже сказал, перед закрывающим тегом пишем этот код:
document.write("Hello World");
Сохраняем и открываем страницу в браузере. Этот код выведет на страницу строчку "Hello World"
Как Вы уже поняли, в JavaScript текст выводится на экран с помощью метода write() , который применяется к объекту document(текущая страница) .
Учтите что, как и в других языках программирования, строковые значения всегда пишутся внутри двойных или одинарных кавычках . Числа можно писать и без кавычек.
Document.write("Строковое значение"); document.write(1214564);
Внутри кавычек можно использовать различные html теги, такие как p, div, strong и другие.
Document.write("
Параграф
");Также часто необходимо к html тегам дописать различные атрибуты. Например, для ссылки необходимо указать обязательный атрибут href. И здесь возникает небольшая проблема с кавычками.
Дело в том, что внутри двойных кавычек мы не можем использовать двойные кавычки. Например, мы не можем вывести значение атрибута href таким образом:
Document.write("my site");
В таком случае мы получим ошибку, потому что текстом для вывода является только тот, который находится внутри кавычек. В данном примере это "
