Варианты использования технологии ajax в Joomla 2.5

в 8:45, , рубрики: ajax, Joomla, joomla 2.5, jquery, метки: , ,

Как известно, Ajax это определенная технология фонового обмена информацией браузера с сервером без перезагрузки всего содержимого страницы. Описывать саму технологию и как она работает я не буду, статей на эту тему и так предостаточно. Рассмотрим использование технологии ajax применительно к CMS Joomla 2.5 с использованием JQuery (это один самых простых вариантов, плюс кроссплатформенность обеспечена).

  1. Ajax без использования фрэймворка Joomla (все функции, например, работа с базой данных, получение информации о пользователях пишем своими руками)
  2. Ajax + фрэймворк Joomla 2.5 (имеем возможность использовать API джумлы, например, для получения информации о пользователе смело можем использовать код: $user = JFactory::getUser)
  3. Ajax + полноценное использование всех возможностей Joomla 2.5, включая MVC (модель-вью-контроллер)

Ajax без использования фрэймворка Joomla 2.5

Все примеры будем рассматривать с данными Joomla 2.5, которые ставятся при ее инсталляции, шаблон по умолчанию «Beez_20». Для начала в какой-нибудь части шаблона вставим функцию на javascript, которая отправляет запрос на сервер с помощью jquery. Выглядеть она будет слеудющим образом:

function zapros() {
                    if (window.jQuery)
                        {
                         alert("jquery загружен");  //окно сигнализирует, что jquery загружен и готов к использованию
                        $.ajax({  //функция jquery
                            type: "POST",
                           url: "ajax.php",  //файл в корне сайта с информацией
                           data: "mydata=data", //данные для сервера
                           success: function(tut_dannye_ot_servera){  //данная функция вызывается при усппешной отработке запроса
                                   alert( "Data Saved: " + tut_dannye_ot_servera );  //окно сигнализирует, что пришел ответ и показывает, что нам передал сервер
                                   $('#korzina').replaceWith( tut_dannye_ot_servera );  //функция jquery помещает ответ в место с id=#korzina

                                       }
                                });
                             }
}
 

также, куда-нибудь в шаблон, компонент либо модуль вставляем кнопку

<input type="button" name="Sub" class="button" value=жмите_сюда onclick = zapros()
<div id=korzina></div>

файл ajax.php, например, выглядит следующим образом

<?php
Echo “ответ  сервера”;
?>

В результате, при нажатии на кнопку «жмите_сюда», на сервер отправится «POST» запрос с данными «mydata=data». На сервере будет открыт файл «ajax.php», в котором на PHP вы можете писать любой код, и вся выданная информация на отображение будет передана вашему сайту в переменную «tut_dannye_ot_servera». Затем, с помощью функции jquery ".replaceWith()", содержимое переменной помещаем в место, где ранее был тег с id=#korzina.
В данном варианте реализации механизма Joomla 2.5 + ajax мы, увы, не можем использовать все прелести, которые дает нам фрэймворк Joomla. Все придется писать своими ручками.

Ajax + фрэймворк Joomla 2.5

При такой реализации, все остается, как в предыдущем варианте, только файл ajax.php будет выглядеть по другому

<?php
define('_JEXEC', 1);
define('DS', DIRECTORY_SEPARATOR);

if (file_exists(dirname(__FILE__) . '/defines.php')) {
	include_once dirname(__FILE__) . '/defines.php';
}

if (!defined('_JDEFINES')) {
	define('JPATH_BASE', dirname(__FILE__));
	require_once JPATH_BASE.'/includes/defines.php';
}

require_once JPATH_BASE.'/includes/framework.php';

$app = JFactory::getApplication('site');
$app->initialise();

$user = JFactory::getUser;
Echo “ответ  сервера”;
?>

Теперь мы можем использовать API функции Joomla 2.5

Ajax + полноценное использование всех возможностей Joomla 2.5, включая MVC (модель-вью-контроллер)

Чтобы не создавать лишних модулей, но, при этом было бы понятно, как все работает, рассмотрим данный пример на модуле «Breadcrumbs». Он выводится в основном шаблоне «Beez_20» на позиции

<jdoc:include type="modules" name="position-2" />

изменять его код нам не понадобиться. Шаблон «Atomic» изменим так, чтобы он выглядел следующим образом:

<?php
defined('_JEXEC') or die;
echo 'получено по ajax';
?>  

<jdoc:include type="modules" name="position-2" />
 

Функция инициирующая запрос по ajax будет выглядеть так

function zapros() {
                    if (window.jQuery)
                        {
                         alert("jquery загружен");  //окно сигнализирует, что jquery загружен и готов к использованию
                        $.ajax({  //функция jquery
                            type: "POST",
                           url: "index.php",  
                           data: "template=atomic ", //данные для сервера
                           success: function(tut_dannye_ot_servera){  //данная функция вызывается при усппешной отработке запроса
                                   alert( "Data Saved: " + tut_dannye_ot_servera );  //окно сигнализирует, что пришел ответ и показывает, что нам передал сервер
                                   $('.breadcrumbs').replaceWith( tut_dannye_ot_servera );  //функция jquery помещает ответ в место с class=breadcrumbs

                                       }
                                });
                             }
}
 

Как видим, в функции изменились отправляемые данные (мы посылаем другой шаблон), также место куда нужно поместить результат (.breadcrumbs). И самое главное, файл который будет открываться при запросе на сервере «index.php».
В результате Вы увидите, что при нажатии кнопки, инициирующей запрос, у Вас изменится содержимое «Breadcrumbs».

Представьте, что вместо «Breadcrumbs» у Вас корзина заказов. При таком подходе не требуется писать разный код для вывода ее обычным образом и через ajax. Достаточно иметь определенный шаблон, который Joomla будет использовать для отправки результата. При этом не нужно плодить шаблоны для каждого модуля. Все можно реализовать в одном шаблоне.

Автор: Hroomer

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js