Создание сайтов своими руками на bootstrap

  • Главная
  • ->
  • Материалы
  • ->
  • Передача значений переменных из JavaScript в PHP и создание сайтов своими руками на bootstrap обратно

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный руками Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Наведите курсор мыши для приостановки прокрутки.


В этой небольшой статье мы рассмотрим с вами один интересный момент, касающийся передачи значений переменных.

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

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

Для определенности, предлагаю вам создать на локальном компьютере хост с именем php_js и разместить там файл index.php, в котором мы и будем рассматривать наши примеры.

Каркасом файла index.php будет простая HTML-разметка:

<!DOCTYPE HTML> <html> <head> <meta charset = "utf-8" /> <title>Передача значений переменных</title> </head> <body> </body> </html>

Для большей наглядности весь код (включая JavaScript) мы будем писать внутри тэгов body.

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

Давайте напишем такой код в тэге body:

<p><strong>1. Из PHP в JavaScript:</strong></p> <?php $name = 'Юрий';?> <script type="text/javascript"> var userName = '<?php echo $name;?>'; document.write('Значение PHP-переменной: ' + userName); </script>

Итак, у нас есть 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-сценария.

Под уже существующим кодом допишем следующее:

<br /><br /><br /> <p><strong>2. Из JavaScript в PHP (метод GET):</strong></p> <script type="text/javascript"> var userName2 = 'Дмитрий'; </script> <?php if (isset($_GET['u_name'])) { echo "Значение JavaScript-переменной: ". $_GET['u_name']; } else { echo '<script type="text/javascript">'; echo 'document.location.href="'. $_SERVER['REQUEST_URI']. '?u_name=" + userName2'; echo '</script>'; exit(); }?>

Внутри блока JavaScript-кода мы создаем переменную userName2 со значением Дмитрий.

Далее работа идет внутри блока PHP-кода.

Здесь наша задача состоит в том, чтобы средствами 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.

Под уже существующим кодом напишем:

<br /><br /><br /> <p><strong>3. Из JavaScript в PHP (метод POST):</strong></p> <script type="text/javascript"> var userName3 = 'Александр'; </script> <p>Значение JavaScript-переменной: <?php if (isset($_POST['u_name'])) { echo $_POST['u_name']. '</p>'; } else { echo "<script type='text/javascript'>"; echo "document.write('<form method=\'post\'>');"; echo "document.write('<p>Ваше имя:<br />');"; echo "document.write('<input type=\'text\' name=\'u_name\' value = \'' + userName3 + '\'</p>');"; echo "document.write('<input type=\'submit\' />');"; echo "document.write('</form>');"; echo "</script>"; exit(); }?>

Начало у нас похожее: в блоке JavaScript-кода мы объявляем переменную с именем userName3 и значением Александр.

Далее мы открываем тэг параграфа для того, чтобы внутри него вывелось значение JavaScript-переменной.

После этого переходим к 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 и обратно.

Успехов вам!

С уважением, Дмитрий Науменко.

Скачать исходники

P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

Наверх


Источник: http://www.codeharmony.ru/materials/129


Рекомендуем посмотреть ещё:


Закрыть ... [X]

Бизнес цитаты - мотивация достижения успеха Полезные статьи Складки при протезировании



Создание сайтов своими руками на bootstrap Виниры - Протезирование зубов в
Создание сайтов своими руками на bootstrap Вязание крючком для начинающих схемы с подробным описанием
Создание сайтов своими руками на bootstrap День рождения для вашего ребенка / Праздник
Создание сайтов своими руками на bootstrap Интегралы онлайн. Математика онлайн
Создание сайтов своими руками на bootstrap Как выбрать подарок на 8 марта для женщин
Создание сайтов своими руками на bootstrap Косметика для проблемной кожи - лечебная и уходовая
Создание сайтов своими руками на bootstrap Костюмчик для новорожденной девочки и мальчика спицами
Создание сайтов своими руками на bootstrap Купленная революция. Тайное дело Парвуса
Латинские пословицы, изречения, цитаты и крылатые Модные короткие стрижки боб-каре и прически на Официальный сайт журнала Посуда Инфо Пломба на переднем зубе - разбираемся » Аденто. ру Пределы онлайн. Математика онлайн Рецепт абсента - ekimOFF Уход за кожей лица - натуральная косметика для

Похожие новости