От автора: в данное время практически каждый сайт использует язык JavaScript и различные библиотеки написанные на нем, к примеру jQuery. И очень часто возникает задача в передаче значений переменных из JavaScript в PHP. Поэтому в данном уроке мы с Вами рассмотрим способы, при помощи которых, можно решить данную задачу. Хочу обратить внимание, что передать можно только значение, а не саму переменную, определенного языка.
1. Постановка задачи
Для начала рассмотрим сайт, на примере которого, мы будем изучать тему сегодняшнего урока:
Это очень простой сайт, состоящий из двух страниц: главная страница, выводит список статей хранящихся в базе данных, и страница полного просмотра текста статьи. Исходный код данного сайта, я здесь приводить не буду, так как он будет доступен Вам в исходниках к этому уроку. Рассмотрим только назначение главных файлов:
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):
|
1 |
$button = "Button"; |
Затем, в файле index.php передадим ее значение в JavaScript (перед подключением файла js/script.js):
|
1 |
var button = "<?php echo $button; ?>"; |
Теперь в файле js/script.js используем значение данной переменной. А именно, создадим блок с классом for_button, в блоке
|
1 |
$(".content").prepend("<p class='for_button'>" + button + "</p>"); |
И добавим несколько правил css для нового созданного блока в файл css/style.css:
|
1 2 3 4 5 6 7 |
.for_button { padding:5px; text-align:center; border:1px solid green; border-radius:5px; width:150px; } |
Теперь давайте посмотрим, что у нас получилось:
Как Вы видите, мы создали новый блок, в виде кнопки и его содержимое формируется в переменной PHP.
3. Передача значений переменных из JavaScript в PHP методом GET
Передача значений переменных языка JavaScript в PHP, задача несколько сложнее, так как требуется передать значение переменной на сервер в интерпретатор языка PHP. Это можно реализовать как методом GET (через адресную строку), так и методом POST. Метод GET предусматривает передачу данных через адресную строку. Поэтому перейдем в файл js/script.js и добавим следующий код:
|
1 2 3 4 |
var id = 2; $(".for_button").click(function() { location.href = "//localhost/lessons/phptojs/view_text.php?id=" + id; }); |
То есть, мы выберем при помощи библиотеки jQuery ранее созданную кнопку с классом for_button и опишем для нее функцию обработчик события click (нажатие мышью по данному элементу). Другими словами при нажатии мышью по кнопке выполнится функция, описанная в методе click().
В теле данной функции мы выполним перенаправление на страницу полного просмотра текста статьи. При этом через адресную строку передадим ее значение. Таким образом, мы передаем значение переменной id в файл view_text.php, то есть из JavaScript в сценарий языка PHP. Давайте посмотри, что у нас получилось (обновляем главную страницу и кликаем по ранее созданной кнопке):
Как Вы видите значение переменной успешно передано.
4. Передача значений переменных из JavaScript в PHP методом POST
Теперь рассмотрим передачу значений переменных из JavaScript в PHP при помощи метода POST. Для этого в файле index.php создадим простую форму ( в блоке с классом content):
|
1 2 3 4 |
<form action="view_text.php" method="POST"> <input type="text" name="search" value=""> <input type="submit" value="OK"> </form> |
Обратите внимание, что значение атрибута value я оставил пустым. Мы его установим, используя JavaScript. А именно, создадим переменную search и, используя jQquery, присвоим ее значение атрибуту value текстовому полю:
|
1 2 |
var search = "search"; $("input[type=text]").val(search); |
То есть значение переменной search мы переносим в атрибут value, а затем остается лишь отправить данные формы.
При этом, значение переменной search будет передано в сценарий языка PHP. Обратите внимание, что обработчиком формы выступает файл view_text.php. Значит, в него нужно добавить код, который обработает данные пришедшие методом POST. Поэтому откроем данный файл и добавим следующий код:
|
1 2 3 |
if($_POST['search']) { $str = $_POST['search']; } |
Затем в одном из блоков выведем значение переменной $str:
|
1 |
<h1><?php echo $str;?></h1> |
При этом на экран мы отобразим данные, которые пришли на данную страницу из метода POST, а значит из скрипта написанного на языке JavaScript. Дайте отправим данные формы и посмотрим, что получилось:
5. Асинхронный способ передачи значений переменных из JavaScript в PHP и наоборот
До сих пор, мы с Вами рассматривали так называемый синхронный способ передачи данных на сервер. То есть, когда при передаче данных мы с Вами видели перезагрузку страницы в браузере, так образом на любое наше действие браузер отправляет данные на сервер, что сопровождается обновлением страницы.
Но, как Вы знаете, существует метод AJAX, используя который можно передавать асинхронные запросы на сервер. При которых, данные все также отправляются на сервер, но обновление страницы не происходит, то есть данные отправляются как бы в фоне и пользователь, этого не замечает.
Поэтому, давайте передадим значение переменной из JavaScript в PHP, используя метод AJAX (опять же значение переменной нужно оправить на сервер в интерпретатор языка PHP). Для этого откроем файл js/script.js и изменим функцию обработчик события click, по ранее созданной кнопке (будем отправлять данные на сервер по нажатию мышью по кнопке):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var ob = { 'id':3 } $(".for_button").click(function() { $.ajax({ type:'POST', url:'index.php', dataType:'json', data:"param="+JSON.stringify(ob), success:function(html) { $("<p class='for_content'>" + html['title'] + "</p>"). prependTo(".content"). hide(). fadeIn(500); } }); }); |
Для работы с AJAX используем библиотеку jQuery и ее метод ajax, со следующими параметрами:
type:’POST’ – тип запроса на сервер;
url:’index.php’ – путь к файлу на серверу, в который отправляем данные;
dataType:’json’ – формат данных, которые придут как ответ от сервера. В данном случае условимся, что сервер отправит данные в формате JSON. При этом полученная строка будет автоматически конвертирована в объект. JSON – специальный строковый формат представления данных. Используя, который можно представить любой массив или объект в виде обычной строки, с которой удобно выполнять различные манипуляции.
Пример JSON строки, описывающей объект с двумя свойствами: firstname и lastname:
|
1 2 3 4 |
{ "firstName": "Иван", "lastName": "Иванов" } |
data – данные которые отправляются на сервер. Обратите внимание, что на сервер мы отправим объект ob, который представим в виде JSON строки, при помощи функции JSON.stringify(ob);
success – описываем функцию которая будет выполнена в результате успешного запроса к серверу. Параметр html, данной функции – это ответ от сервера. Который должен обязательно прийти в формате JSON, в соответствии с настройкой dataType, и который будет конвертирован в объект (то есть в html содержится ответ от сервера в виде объекта). В теле данной функции, выведем на экран заголовок статьи (условимся, что ответ от сервера – это будет массив данных о конкретной статье). Для этого используем метод prependTo(), и вставим данные в блок с классом for_content. При этом добавим анимационный эффект появления данных на экране, при помощи метода fadeIn() (метод hide() необходим, что бы мгновенно скрыть выводимый на экран блок, для того что бы в последствии его можно было плавно показать на экран, используя метод fadeIn()).
Теперь, так как мы передаем данные в файл index.php, в него необходимо добавить код, который обработает эти данные:
|
1 2 3 4 5 6 |
if($_POST['param']) { $param = json_decode($_POST['param']); $row = get_text($param->id); echo json_encode($row); exit(); } |
То есть, проверяем, если пришли данные методом POST, то сохраняем их в переменную $param. При этом предварительно обработав их функцией json_decode(). Которая декодирует JSON строку и возвращает объект, хранящийся в ней. Таким образом в переменной $param содержится объект. У которого есть свойство $id, его мы используем в качестве идентификатора статьи для функции get_text(), которая вернет массив данных статьи по ее идентификатору. Этот массив мы сохраним в переменную $row. Затем конвертируем его в JSON строку и выводим на экран, используя функцию echo. Так как мы обращаемся к данному файлу асинхронно, и данный участок кода сработает, когда придут данные методом POST (а в нашем случае, они придут только асинхронно). Поэтому весь вывод на экран и будет являться ответом от сервера, который попадет в переменную html. Далее что бы в ответ от сервера, не попало лишних данных, мы выполняем exit().
Вот и все, можно проверять работу нашего скрипта:
Как Вы видите, Все успешно работает. Таким образом, мы с Вами передали значение переменной JavaScript в PHP и наоборот, используя асинхронные запросы к серверу.
На этом давайте прощаться. Всего Вам доброго и удачного кодирования!!!
Метки: PHP, JS, передача значений
Комментарии (1)