Return javascript var to php

Assign a Javascript variable to PHP variable

When working with PHP and JavaScript together, there are times when you need to pass values from JavaScript to PHP. This can be done by assigning a JavaScript variable to a PHP variable. In this post, We will explain different methods to do that.

Why do we assign a Javascript variable to a PHP variable?

There are many reasons why one might want to assign a Javascript variable to a PHP variable. Some possible reasons include:

-To pass data from Javascript to PHP (for example, to use PHP to process or store data that was entered into a form via Javascript)

-To make use of PHP’s built-in functions and libraries from within Javascript

-To take advantage of PHP’s faster execution speed when working with large data sets or complex algorithms.

Use document.cookie and $_COOKIE to assign a JS variable to a PHP variable

The document.cookie is used to store cookies in javascript and $_COOKIE is a PHP superglobal variable that is used to access cookies. We will use document.cookie to store javascript variable value to a cookie and access it in PHP using $_COOKIE.

$h1 = $_COOKIE['h1']; $h2 = $_COOKIE['h2']; $w1 = $_COOKIE['w1']; $w2 = $_COOKIE['w2']; $c = $_COOKIE['c']; $cookies = $_COOKIE['cookies']; $lang = $_COOKIE['lang']; $java = $_COOKIE['java']; 

The first time you log in it doesn't work. If you reload the page everything is fine. This is because php will execute first only then the javascript.

Источник

Передача значений переменных из 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, в блоке

с классом content и как содержимое добавим в него значение переменной. Для этого используем библиотеку jQuery и ее метод prepend, который добавляет html код в выбранный блок.

$ ( ".content" ) . prepend ( "

" + 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-разработчик»

Изучите курс и создайте полноценный проект — облачное хранилище файлов

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

На этом давайте прощаться. Всего Вам доброго и удачного кодирования.

Источник