Как передать переменную с js в php [дубликат]
Способ первый: Необходимо разместить в странице нужный JavaScript-код или сгенерировать его на стороне сервера, как это описано в руководстве по PHP, и передать в браузер пользователя. В этом примере мы определим ширину и высоту экрана пользователя:
Если браузер пользователя поддерживает JavaScript, то после выполнения скрипта страница обновится и мы увидим в адресной строке запрос:
Знак ? после имени скрипта указывает веб-серверу что мы хотим сделать GET -запрос к нашему 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-тегом , который вставляет изображения в HTML-страницу. Вместо картинки мы укажем имя нашего PHP-скрипта и присоединим к нему переменную query с запросом:
Таким способом можно передавать запросы любому скрипту. Результат выполнения этих двух блоков JavaScript-кода браузер пользователя превратит в следующий HTML-код:
Браузер обратится к серверу за картинкой по указанному адресу и, в результате, сделает GET-запрос к script.php с нужными нам параметрами. Теперь мы можем обработать полученные переменные в нашем script.php:
Способ третий: Данные будут переданы PHP-скрипту после нажатия пользователем на ссылку:
или на кнопку в форме:
В случае использования формы каждую переменную необходимо передавать в отдельном поле. Мы использовали скрытые поля формы, имена которых соответствуют именам переменных в нашем PHP-скрипте. Или же можно вообще не использовать текстовые поля, а передать все данные через параметр action="" нашей формы:
Заключение
Первый способ не очень удобен, так как браузеру после обработки кода JavaScript нужно обновить страницу, передав PHP-скрипту полученные данные. При использовании второго способа передача данных из JavaScript в PHP проходит незаметно для пользователя без обновления содержимого страницы. Третий способ дает такой же результат, как и первые два, но требует нажатия ссылки или кнопки пользователем. Какой способ лучше использовать? Все зависит только от поставленной задачи.
Любой из этих способов можно использовать для того, чтобы передать значение из JavaScript не только в PHP, но и в Perl, ASP или в любой другой язык программирования, который выполняется на стороне веб-сервера.
Передача значений переменных из JavaScript в PHP и наоборот
От автора: в данное время практически каждый сайт использует язык JavaScript и различные библиотеки написанные на нем, к примеру jQuery. И очень часто возникает задача в передаче значений переменных из JavaScript в PHP. Поэтому в данном уроке мы с Вами рассмотрим способы, при помощи которых, можно решить данную задачу. Хочу обратить внимание, что передать можно только значение, а не саму переменную, определенного языка.
1. Постановка задачи
Для начала рассмотрим сайт, на примере которого, мы будем изучать тему сегодняшнего урока:
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать веб-приложение на PHP с полного нуля
Это очень простой сайт, состоящий из двух страниц: главная страница, выводит список статей хранящихся в базе данных, и страница полного просмотра текста статьи. Исходный код данного сайта, я здесь приводить не буду, так как он будет доступен Вам в исходниках к этому уроку. Рассмотрим только назначение главных файлов:
index.php – подключает необходимые файлы и выводит главную страницу на экран;
view_text.php – выводит страницу просмотра полного текста статьи;
config.php – содержит настройки для подключения к базе данных и собственной само подключение;
funcntions.php – содержит две функции по получению всех статей из базы данных и получению одной конкретной статьи по ее идентификатору;
js/script – пустой файл, в котором мы будем писать скрипты на языке JavaScript;
css/style.css – файл стилей для сайта.
Теперь давайте рассмотрим способы передачи значений переменных из JavaScript в PHP.
2. Передача значения переменных из PHP в JavaScript
Это пожалуй самый простой способ. Давайте вспомним, где содержится интерпретатор языка JavaScript?
Интерпретатор языка JavaScript, в содержится в браузере. То есть код JavaScript обрабатывается непосредственно браузером, когда страница передается ему от сервера.
Теперь вспомним, где интерпретируется язык PHP? Интерпретатор языка PHP содержится на сервере. При этом PHP интерпретируется до того как страница попадет в браузер, пользователя. Значит, для передачи значения переменной языка PHP в язык JavaScript, достаточно между тегами script вывести значение этой переменной. К примеру, создадим переменную в конфигурационном файле config.php (переменная PHP):
Затем, в файле index.php передадим ее значение в JavaScript (перед подключением файла js/script.js):
Теперь в файле js/script.js используем значение данной переменной. А именно, создадим блок с классом for_button, в блоке
И добавим несколько правил css для нового созданного блока в файл css/style.css:
Теперь давайте посмотрим, что у нас получилось:
Как Вы видите, мы создали новый блок, в виде кнопки и его содержимое формируется в переменной PHP.
3. Передача значений переменных из JavaScript в PHP методом GET
Передача значений переменных языка JavaScript в PHP, задача несколько сложнее, так как требуется передать значение переменной на сервер в интерпретатор языка PHP. Это можно реализовать как методом GET (через адресную строку), так и методом POST. Метод GET предусматривает передачу данных через адресную строку. Поэтому перейдем в файл js/script.js и добавим следующий код:
Обратите внимание, что значение атрибута value я оставил пустым. Мы его установим, используя JavaScript. А именно, создадим переменную search и, используя jQquery, присвоим ее значение атрибуту value текстовому полю:
То есть значение переменной search мы переносим в атрибут value, а затем остается лишь отправить данные формы.
При этом, значение переменной search будет передано в сценарий языка PHP. Обратите внимание, что обработчиком формы выступает файл view_text.php. Значит, в него нужно добавить код, который обработает данные пришедшие методом POST. Поэтому откроем данный файл и добавим следующий код:
Затем в одном из блоков выведем значение переменной $str:
При этом на экран мы отобразим данные, которые пришли на данную страницу из метода POST, а значит из скрипта написанного на языке JavaScript. Дайте отправим данные формы и посмотрим, что получилось:
5. Асинхронный способ передачи значений переменных из JavaScript в PHP и наоборот
До сих пор, мы с Вами рассматривали так называемый синхронный способ передачи данных на сервер. То есть, когда при передаче данных мы с Вами видели перезагрузку страницы в браузере, так образом на любое наше действие браузер отправляет данные на сервер, что сопровождается обновлением страницы.
Но, как Вы знаете, существует метод AJAX, используя который можно передавать асинхронные запросы на сервер. При которых, данные все также отправляются на сервер, но обновление страницы не происходит, то есть данные отправляются как бы в фоне и пользователь, этого не замечает.
Поэтому, давайте передадим значение переменной из JavaScript в PHP, используя метод AJAX (опять же значение переменной нужно оправить на сервер в интерпретатор языка PHP). Для этого откроем файл js/script.js и изменим функцию обработчик события click, по ранее созданной кнопке (будем отправлять данные на сервер по нажатию мышью по кнопке):
Для работы с AJAX используем библиотеку jQuery и ее метод ajax, со следующими параметрами:
type:’POST’ – тип запроса на сервер;
url:’index.php’ – путь к файлу на серверу, в который отправляем данные;
dataType:’json’ – формат данных, которые придут как ответ от сервера. В данном случае условимся, что сервер отправит данные в формате JSON. При этом полученная строка будет автоматически конвертирована в объект. JSON – специальный строковый формат представления данных. Используя, который можно представить любой массив или объект в виде обычной строки, с которой удобно выполнять различные манипуляции.
Пример JSON строки, описывающей объект с двумя свойствами: firstname и lastname:
data – данные которые отправляются на сервер. Обратите внимание, что на сервер мы отправим объект ob, который представим в виде JSON строки, при помощи функции JSON.stringify(ob);
success – описываем функцию которая будет выполнена в результате успешного запроса к серверу. Параметр html, данной функции – это ответ от сервера. Который должен обязательно прийти в формате JSON, в соответствии с настройкой dataType, и который будет конвертирован в объект (то есть в html содержится ответ от сервера в виде объекта). В теле данной функции, выведем на экран заголовок статьи (условимся, что ответ от сервера – это будет массив данных о конкретной статье). Для этого используем метод prependTo(), и вставим данные в блок с классом for_content. При этом добавим анимационный эффект появления данных на экране, при помощи метода fadeIn() (метод hide() необходим, что бы мгновенно скрыть выводимый на экран блок, для того что бы в последствии его можно было плавно показать на экран, используя метод fadeIn()).
Теперь, так как мы передаем данные в файл index.php, в него необходимо добавить код, который обработает эти данные:
То есть, проверяем, если пришли данные методом POST, то сохраняем их в переменную $param. При этом предварительно обработав их функцией json_decode(). Которая декодирует JSON строку и возвращает объект, хранящийся в ней. Таким образом в переменной $param содержится объект. У которого есть свойство $id, его мы используем в качестве идентификатора статьи для функции get_text(), которая вернет массив данных статьи по ее идентификатору. Этот массив мы сохраним в переменную $row. Затем конвертируем его в JSON строку и выводим на экран, используя функцию echo. Так как мы обращаемся к данному файлу асинхронно, и данный участок кода сработает, когда придут данные методом POST (а в нашем случае, они придут только асинхронно). Поэтому весь вывод на экран и будет являться ответом от сервера, который попадет в переменную html. Далее что бы в ответ от сервера, не попало лишних данных, мы выполняем exit().
Вот и все, можно проверять работу нашего скрипта:
Как Вы видите, Все успешно работает. Таким образом, мы с Вами передали значение переменной JavaScript в PHP и наоборот, используя асинхронные запросы к серверу.
PHP и JavaScript
Разместил на этой странице примеры написания кода, и результаты совместного использования двух самых основных языков программирования: PHP и JavaScript.
Такое позволяет взаимодействовать с сервером БЕЗ перезагрузки страниц. Иногда с частичной перезагрузкой.
Всё происходит здесь, на этой странице, т.е. совершенно без участия и загрузки отдельного «файла-обработчика».
Код, написанный по этой технологии, всегда состоит из двух частей. Одна из них выполняется в браузере (JavaScript), а вторая (PHP) на сервере.
Для передачи данных (т.е. значений переменных) из одного языка программирования в скрипты другого, и существует такая отличная технология совместного использования PHP и JavaScript.
*Prim.
Некоторые программисты считают, что это и НЕ технология вовсе, а лишь способ обмена данными. Ну, . . . пусть себе считают.
Человек, по курсам которого учился программированию я, считает по-другому. Да, какая в конце концов разница, что это.
Главное(!) , что с помощью такого, пусть способа, возможно собирать очень интересные и полезные программные конструкции для сайтов.
Сначала самый простой пример работы и написания скрипта.
Передача данных из кода PHP в код JavaScript
Пробовал слово «Вася» взять в переменную в коде PHP, и передать её значение для вывода в код JavaScript.
Видно, что всё прошло «на ура»! Даже цвет и размер шрифта передался.
«Вася» преспокойно «переехал» из одного языка программирования в другой. Разумеется, не сама переменная «переехала», а именно её значение. Это важно!
**Сама переменная никогда и никуда НЕ передаётся, и передаваться НЕ может.
Она часть программы. Передаётся только её значение.
Пример написания.*
<?php
$name = «<font size=’+2′ color=’blue’><b>Вася</b></font>»;
?>
<script type=»text/javascript»>
var name = «<?php echo $name; ?>»;
document.write(name);
</script>
P.S.* Работает и БЕЗ(!) создания глобальной переменной var , но всё же так, как сделал, будет правильнее.
Передача данных из JavaScript в код PHP
Теперь пробую Н А О Б О Р О Т. Разница есть! Этот способ немного отличается. Ведь JavaScript — клиентский скрипт, т.е. исполняемый у нас в браузере компьютера, а PHP — серверный.
Поэтому, просто так, как в верхнем примере, сделать уже «не прокатит». Нужно прописать метод. Иначе работать не будет!
Чаще всего используются методы: GET (для ссылок) и POST (для форм).
Хотя есть и более «экзотические» методы общения с сервером: TRACE DELETE PUT, и им подобные.
Из JavaScript в код PHP (методом GET)
По сути — всё то же самое. Принцип один(!): прописываем текст, его цвет и размер в «чистом» коде JavaScript, а после средствами PHP создаём команду вывода на языке JavaScript, используя оператор вывода языка PHP echo .
Видно, что здесь тоже всё прошло отлично!
Пример написания.*
<script type=»text/javascript»>
var name2 = «<font size=’+2′ color=’blue’><b>Александр</b></font>»;
</script>
<?php
$name2 = $_GET[«name2»];
echo «<script type=’text/javascript’>»;
echo «document.write(name2);»;
echo «</script>»;
?>
Ниже пример совместной работы двух языков программирования по второму методу.
Из JavaScript в код PHP (методом POST)
Дальше не стал выводить на экран монитора примеры написания использованных языковых конструкций.
Всё абсолютно то же самое! Разница только, что вместо «вытаскивания» из глобального массива $_GET, прописываем $_POST. И всё! Результат работы кода ниже.
Показал самые простые примеры совместного использования (один внутри другого) двух языков программирования.
**Очень важно! Быть внимательнее с синтаксисом!
Нужно прописывать ПОЛНЫЙ синтаксис JavaScript внутри кода PHP, и наоборот: ПОЛНЫЙ синтаксис PHP внутри JavaScript.
Дальше покажу более сложные, наглядные примеры, которые позволяют себя опробовать прямо на этой странице.
Примеры практического использования
Прежде всего, такую технологию используют для программирования простых действий: выбрать что-либо, добавить в корзину интернет-магазина, подписаться, вывести какие-нибудь данные и т.д., и т.п..
Из JavaScript в PHP (метод POST)
Выделил нижнюю пробную форму голубоватым фоном, чтоб не путалась с остальным содержанием страницы.
Сейчас в её текстовом поле находится то, что она получила из JavaScript. Если просто кликнуть по кнопке, то значение перейдёт в код PHP, а форма исчезнет.
Можно ввести свой текст. Максимальное количество символов: 20 Не забывать! Пробел тоже символ! Подробнее об особенностях работы такой формы — под ней.
Передано в PHP-код:
Как уже писал, тестовая форма после клика по кнопке «Подача запроса» исчезает.
Так и должно быть. Так я прописал в её коде.
Важно! Желая ещё раз опробовать работу формы, нужно обновить страницу. НО! Это нужно делать НЕ(!) через такой символ обновления (или ему подобный) в верхней панели управления браузером, а сначала выделить в поисковой строке адрес страницы , и нажать клавишу ENTER на клавиатуре.
Такое действие скажет браузеру, чтобы он не брал данные из «кэша», а загрузил всё ещё раз. Иначе компьютер будет задавать неуместные здесь вопросы.
Есть ещё один интересный пример практического использования.
Изменение данных с помощью AJAX
Технология AJAX, несмотря на своё название «Asynchronous Javascript And Xml», может работать не только с файлами XML, а с разным типом.
Испытывая её неоднократно во время изучения, пробовал получать данные из файлов разных форматов: .htm .html .php .json, и даже простого .txt *Работают!
Проверял файл ajax.txt на сервере сайта, но оказалось, что содержание гораздо проще и лучше всего(!) менять, получая данные из файлов с форматом .htm
К примеру, нижний тестовый блок получает их из ajax.htm
Позволить коду по технологии AJAX изменить содержание этого пробного блока?
Для повторного испытания работы скрипта, нужно просто обновить страницу, как обычно, через кнопку верхней панели управления.
*Prim. Если вдруг компьютер снова начнёт задавать вопросы, значит — после проверки предыдущего кода страница НЕ была перезагружена, как было нужно.
Показанный пример использования технологии AJAX для обмена данными между двумя файлами хорош(!) , конечно. Так можно передавать многое: не только текст, но и картинки, ссылки.
К тому же(!) , входящий файл начинает «понимать» стиль CSS этой страницы, хотя сам он абсолютно «голый».
Главное! При внесении изменений во входящий файл, НЕ ЗАБЫТЬ(!) обратиться к нему «напрямую», чтобы изменения вступили в силу.
Интересный пример. Всё так. Здорово! . . . НО!
Он гораздо «хитрее» по своему устройству, чем все показанные до него примеры. Да, и не только это.
Пришлось текстовую информацию написать на английском языке. Русские символы верно показывал только Internet Explorer 8.
Однако, самое главное «НО!» не в этом, а в том, что попытки создать и использовать ещё один тестовый блок (подобный показанному) на этой же странице ни к чему хорошему не привели.
Компьютер «вконец запутался», чего от него хотят, и локальный сервер стал давать сбои.
Оно и понятно! Нагрузка на сервер значительно возросла.
Ведь клик по управляющей кнопке запускает целую мини-программу: компьютер создаёт запрос к серверу, связывается с ним, считывает содержание нужного файла, но выводит НЕ ЕГО, а создаёт новый XML-документ. Короче — целая «бодяга»! 
Поэтому, хоть последний показанный способ обмена данными и интересен, но мне всё же больше нравятся простые. Те, что показывал ДО него.
Тем не менее!
Если вдруг будет нужно, то отличная, подробнейшая(!) информация по созданию и настройке XMLHttpRequest (ajax-запросов) находится здесь. 
В заключение маленькое дополнение о похожих способах изменения данных.
Дополнение
Последний показанный пример внешне очень похож на те, что я показывал в большом разделе, посвящённом изучению JavaScript на странице «Спойлеры» (откроется в новом окне) .
Однако, это именно внешне!
Там всё уже было на самой странице, и просто пряталось/показывалось методами языка JavaScript hide/show.
Здесь же страница ничего не знает (до клика по кнопке) о содержании подключённого к ней файла.
Синяя стрелка вернёт на общую, главную страницу выбора тем: «Изучение PHP» .