Как связать js и php

Обновлено: 19.04.2024

В большинстве веб-приложений статические JavaScript-файлы устраивают разработчика на 100%. Однако же иногда бывает лучшим решением подключить PHP и сгенерировать содержимое JS-файла «на лету» (например, получить актуальные цены на продукты из БД и передать их JavaScript-программе для валидации формы заказа). Как же это сделать?

Способ первый: простой

Конечно же, самое простое решение состоит в том, чтобы включить код PHP внутрь секции вашего HTML-шаблона, поскольку есть шансы, что у него будет расширение .php.


Даже если расширение шаблона .htm или .html, то в большинстве случаев веб-сервер настроен так, чтобы понимать включения PHP-кода (если же нет, то в конце заметки есть простой пример как решить и эту проблему). Но что касается красоты, то этот вариант не самый изящный. Хорошо бы держать мух и котлеты раздельно.

Способ второй: красивый

Второй вариант решения — настроить веб-сервер так, чтобы он парсил JavaScript-файлы на предмет выполнения PHP-кода. Достаточно создать в нужной папке файл .htaccess или открыть уже существующий и добавить в него следующие строки:

Pro et Contra: что нам это дает?
  • Вы можете включать PHP-код в файлы с расширением .js и он автоматически выполнится при клиентском обращении к JavaScript-файлу.
  • Вы можете держать такие «гибридные» скрипты в отдельной папке — достаточно в эту папку поместить описанный выше файл .htaccess.
  • Если вы хотите держать все JavaScript-файлы в одном месте (статические и гибридные), то можете зарегистрировать обработчик файлов с произвольным расширением, например, .js2 — достаточно немного модифицировать текст .htaccess.
  • Вы можете разделить статические HTML-страницы, шаблоны и JavaScript-файлы.
  • Теоретически это вызовет минимальную дополнительную нагрузку на работу сервера, но, учитывая вариации с отдельными папками или расширениями файлов, польза кажется превосходящей.
Дополнение

Для того, чтобы веб-сервер парсил файлы .htm и .html и выполнял включенный в них PHP-код, нужно добавить в .htaccess следующие строки:


Замечания, дополнения и обмен опытом приветствуются.

ВЫВОДЫ


Довольно странно, что небольшая заметка, которая фактически предлагает всего-навсего сниппет для быстрой реализации конкретной практической задачи вызвала такое бурное обсуждение, по большей части похожее на попытки блеснуть теорией. Знаменитое хабра-сообщество в данном случае самоотверженно линчевало те идеи, которые в заметке в принципе не затрагивались. Хотя надо отдать должное — несколько здоровых мыслей все таки есть. И кроме того — нет «никакой другой роскоши, кроме роскоши человеческого общения» (если верить Экзюпери)))).

Добрый день! Веб-программирование начал изучать относительно недавно. За это время удалось изучить неплохо PHP, HTML, CSS, немного Javascript и самую малость JQuery. При практическом программировании сайтов столкнулся с потребностью в динамических штучках для сайта, которые бы работали без перезагрузки страницы. Как известно этого нельзя добиться средствами PHP. Потому обратил свой взор к JavaScript и JQuery.

Расскажите немного про взаимодействие PHP с JQuery и JavaScript. Каким образом происходит обмен данными, если такая потребность возникает. Например есть элемент "лайк"(сердечко) которое отмечает симпатию читателю к статье, он ее щелкает и срабатывает JQuery-код - без обновления страницы должно прибавиться значение нового "лайка", потом это увеличенное на одно значение надо добавить в базу данных, тоесть средствами PHP записать в Mysql. Как такие вещи реализуются? Расскажите.

Смотрел эту статью PHP библиотека для jQuery и многое не понял. Доступным языком объясните, как идет связка фрейворка JQuery или даже только чистого JavaScript с PHP. Буду благодарен за ответ.

Pretty logical, your javascript runs at the moment it is outputted in the browser and your form is printed . after that. You should enclose your code in a window.onload event listener so that it is only executed after the page load completion.

4 Answers 4

Just echo the javascript out inside the if function

Please note the the solution here is not generating the JavaScript code with PHP but the fact that the PHP block comes after the form tags which means the DOM element 'testForm' is initialized when the JavaScript is executed.

Lately I've come across yet another way of putting JS code inside PHP code. It involves Heredoc PHP syntax. I hope it'll be helpful for someone.

After closing the heredoc construction the $script variable contains your JS code that can be used like this:

The profit of using this way is that modern IDEs recognize JS code inside Heredoc and highlight it correctly unlike using strings. And you're still able to use PHP variables inside of JS code.

От автора: в данное время практически каждый сайт использует язык 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 будет передано в сценарий языка PHP. Обратите внимание, что обработчиком формы выступает файл view_text.php. Значит, в него нужно добавить код, который обработает данные пришедшие методом POST. Поэтому откроем данный файл и добавим следующий код:

Затем в одном из блоков выведем значение переменной $str:

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


5. Асинхронный способ передачи значений переменных из JavaScript в PHP и наоборот

До сих пор, мы с Вами рассматривали так называемый синхронный способ передачи данных на сервер. То есть, когда при передаче данных мы с Вами видели перезагрузку страницы в браузере, так образом на любое наше действие браузер отправляет данные на сервер, что сопровождается обновлением страницы.

Но, как Вы знаете, существует метод AJAX, используя который можно передавать асинхронные запросы на сервер. При которых, данные все также отправляются на сервер, но обновление страницы не происходит, то есть данные отправляются как бы в фоне и пользователь, этого не замечает.

Для работы с 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 и наоборот, используя асинхронные запросы к серверу.

Для начала я хочу поблагодарить m007, который подал идею, как можно упростить Programmer-friendly интерфейс взаимодействия Клиент(JS)-Сервер(PHP), что и поспособствовало написанию этой статьи.

Данная статья является заключительной, в которой я объединю JS-Шаблоны, PHP Model-controller, и добавлю Динамическое создание UI методов на JS (некоторые идеи которого были взяты из статьи m007). Тем самым мы получим на выходе неплохой и удобный фундамент для создания своих AJAX приложений.

Динамическое создание методов на JavaScript

Для начала хочу обратить ваше внимание, что все наши методы лежат в PHP-библиотеке. Каждый метод можно вызвать, передав определенные параметры в стиле JSON. И чтобы вызвать PHP-метод из JS, я предлагал в прошлой статье использовать функцию server_exec. Но можно это сделать более удобно и
информативно для программиста.
m007 предложил вызывать функции прямо из JS, то есть вместо server_exec(«database_func(. );»,function()<. >) использовать в JS database.func(. ).

В PHP, для не объявленных функций, есть метод __call. В JS такого метода нет, но можно предварительно подгрузить методы из PHP-библиотеки и динамически добавить их в JS-класс.

this .add= function (res) var methods=eval( '' );
for ( var index in methods)
that[methods[index]] = ( function (name) return function () request.push( '"' + name + '":' + that.methods(Array.prototype.slice.call(arguments)));
if (!timer)
timer=window.setTimeout( function () ajax_load(url, «method=" , that.ajax_run, true );
>,0);
>;
>)(methods[index]);
> * This source code was highlighted with color='gray'>Source Code Highlighter .

При запуске метода, происходит кодирование входящих параметров (request.push('"'+methods[index]+'":'+that.methods(Array.prototype.slice.call(arguments)))) и установка нулевого таймера на функцию для отсылки запроса. Думаю, что некоторых читателей этот момент удивил. По этому я остановлюсь на нём поподробнее.

Javascript не имеет потоков и весь код выполняет последовательно. Состояния у него всего два – выполнение кода и ожидание прерывания. Прерывания могут прийти, например, от таймера (по таймауту), от AJAX запроса (при смене статуса) и т д. При этом запускается состояния выполнение кода, который не прерывается, пока не дойдёт до конца.
Именно для этого я использую нулевой таймер, который запустит выполнение функции отсылающей запрос на сервер, после окончания выполнения основного кода. Сделано это для того, чтобы отсылать всё одним инкрементированным запросом, состоящим из всех вызываеммых функций и обрабатывать результаты последовательно.

Теперь можно перейти к обработке результатов запроса. Так как обработчик будет вызван не сразу – то это будет функция или несколько функций, которые необходимо вызвать, когда придет ответ.
Этим занимаются методы run и ajax_run. Первый добавляет функции на запуск после получения ответа. Функции должны иметь вид function(data). А функция ajax_run занимается их запуском.

this .ajax_run= function (req) var ret=eval( '(' +req.responseText+ ')' );
for ( var i in func)
if (func[i])
func[i](ret);
request=[];
func=[];
timer= false ;
> * This source code was highlighted with color='gray'>Source Code Highlighter .

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

//Инициализация класса удаленной работы с файлами.
/* Синхронный запрос на вызов FileManager.php.
Получение методов dir,save,read.
Динамическое создание функций. */
var File= new PHPUIclass( 'FileManager.php' );

//Вызов удалённых функций
/* Установка таймера и формирования запроса */
File.save( «edited.txt» , «Отредактированная часть файла» );
File.read( «save.log» );

//Конец выполнения скрипта, а значит выполнение POST-запроса по Timeout(0) и возвращение результатов в show_file и show_dir * This source code was highlighted with Source Code Highlighter .

Но в этом случае будет происходить два запроса. Этого избежать можно несколькими способами. Один из способов — это реализовать вызов необходимой функции с возвратом пряма в PHP.

function checkfile($filename) global $UImethod;
if (file_exists($filename))
return $UImethod->read($filename);
else
return array( «ERROR» => array( «checkfile» =>$filename));
>

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

Пример

А вот — простой пример. File-viewer с возможностью редактировать файлы.

PHP:
UI.php основной класс UserInterface — подключается в библиотеку.
mod.fileview.php библиотека для чтения-записи файлов — функции read и save.
mod.dirview.php библиотека для чтения дириктории — функция dir.
mod.backup.php библиотека для формирования save.log — функции read,save,dir.
FileManager.php основной файл, который включает в себя все модули и запускает обработчик запроса.

Javascript:
PHPUI.js основной класс, который занимается подключением к интерфейсу UserInterface в php.
skin.js — класс работы с шаблонами.
index.html — загрузка шаблонов, вывод файлов.

Послесловие

Плюсы:
— Удобство программирования и создания новых методов для JS-интерфейса
— Ясность и прозрачность кода
— Универсальность методов
— Возможен вызов функций с неопределенным количеством параметров
Минусы:
— Нет проверки на параметры методов. Возможны простейшие ошибки при создании кода. Но для этого можно в PHP-функциях проверять пришедшие параметры (например для DEBUG-MODE). В случае не верных параметров, выводить alert(«ERROR»).

Читайте также: