5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Здравствуйте, уважаемые читатели блога LifeExample, наконец-то меня посетило вдохновение и я готов порадовать вас новым, большим и полезным материалом для начинающих web-мастеров. В этой статье речь пойдет о золотой технологии AJAX и примерах скриптов, написанных на её основе.
Сегодня я сделаю упор на работу с XML данными, т.к. пытаясь разобраться с технологией AJAX, мне попадались лишь примеры работы с JSON форматом. О работе с ним читайте в продолжении к данному материалу, которое скоро будет подготовлено и опубликовано.
Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:
- Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
- Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
- Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.
Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.
Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.
Клиентская часть. Демонстрация
Для работы AJAX как вам наверное известно нужно две части — клиентская и серверная. На клиенте нужно написать javascript код который будет отправлять сам запрос без перезагрузки страницы. На сервере нужно поместить какой то html файл или скрипт, который будет давать ответы на клиентские запросы.
Начнем с клиентской стороны.
Как это все будет выглядет для пользователя:http://verstaem.com/examples/ajax-1c-bitrix/
Вот html код корзины:
Вот скрипт на jquery который отправляет ajax запрос:
То есть при нажатии на ссылку «Обновить» происходит отправка ajax запроса к ajax.handler.php из корня сайта. Полученный ответ вставляется в <span class=’current’></span>. Все довольно просто.
На самом деле это не AJAX, а AJAH, так как в ответе приходит уже готовый html, а не xml из которого еще нужно забрать данные. Но суть примерно одна.
Можно добавить всяких украшательств, например анимированный gif загрузки, но суть останется такой же.
Элементы кода, которые будут использованы в примерах.
XMLHttpRequest, — это класс, для работы AJAX.
request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.
url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.
.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.
.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.
.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.
onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера.
readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:
| Значение | Описание |
| Метод open() не вызван | |
| 1 | Метод open() вызван |
| 2 | Получены заголовки ответа |
| 3 | Получено тело ответа |
| 4 | Передача ответа выполнена |
status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.
.responseText – данные, которые придут от сервера в виде строки.
.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.
.text() – используется в запросе fetch, возвращает строку.
.json() – используется в запросе fetch, возвращает json обращенный в объект.
Делаем запрос GET с помощью $.get()
Метод jQuery предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).
В простейшей форме можно вызвать метод так:
…где является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:
$.get( "http://example.com/getForecast.php" );
…хотя можно также запросить статический документ:
$.get( "http://example.com/mypage.html" );
При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:
$.get( "http://example.com/getForecast.php?city=rome&date=20120318" );
Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:
var data = { city: "rome", date: "20120318" };
$.get( "http://example.com/getForecast.php", data );
В качестве альтернативы вы можете передать данные методу как строку:
var data = "city=rome&date=20120318"; $.get( "http://example.com/getForecast.php", data );
Использование вспомогательных методов для работы с конкретными типами данных
Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.
Получение HTML-фрагментов
Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:
В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:
Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.
Получение и выполнение сценариев
Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:
Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).
Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:
Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.
Метод getScript() можно использовать для загрузки любых сценариев, но особенно полезно использовать его для загрузки и выполнения таких сценариев, как сценарии для отслеживания статистики посещения сайтов или определения географического местоположения клиента, которые не связаны с поддержкой основной функциональности веб-приложения. Пользователя не особенно заботит, в состоянии ли мы точно определять его местоположение для ведения статистики, тогда как длительное ожидание загрузки и выполнения сценария будет действовать ему на нервы.
Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.
В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:
Отнеситесь к этому примеру как к одному из образцов надежного дизайна для ситуаций, в которых документ подвергается изменениям. Во всяком случае запомните, что при написании внешних сценариев JavaScript не стоит делать слишком много допущений о состоянии документа.
Получение данных в формате JSON
Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().
Отправка формы через AJAX
Отправить форму с помощью jQuery можно несколькими способами. Допустим, есть форма с полями для ввода имени и пароля. Типичная задача: нужно проверить, не пусты ли эти поля (процедура валидации входных данных).
Файл form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример отправки формы</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="form-post.js"></script>
<style type="text/css">
#msg {
padding-top: 5px;
color: red;
}
</style>
</head>
<body>
<form id="form">
<div>
<label for="name">Имя:</label><br>
<input type="text" name="name">
</div>
<div>
<label for="password">Пароль:</label><br>
<input type="password" name="password">
</div>
<div><input type="submit" value="Отправить"></div>
</form>
<div id="msg"></div>
</body>
</html>
В этом файле создана форма и предусмотрено поле для вывода ответа сервера.
Файл form.php
<?php
if(empty($_POST)){
echo 'Укажите имя.';
}elseif(empty($_POST)){
echo 'Укажите пароль.';
}else{
echo 'Вход...';
}
?>
На сервер помещена логика проверки заполнения полей.
Мы можем воспользоваться уже знакомым методом .
Файл form-post.js
$(document).ready(function () {
$("#form").on("submit", function () {
$.post('form.php', $('#form').serialize(), function(data, status){
$("#msg").html(data);
});
});
});
Данные передаются ему во втором параметре. Это легко делается с помощью метода , который применяется к форме.
Запомните, что этот метод передает только значения полей, пригодных для передачи (). Значение кнопки submit не передается, потому что форма передается без ее использования. Чтобы значение элемента формы было включено в сериализованную строку, он должен иметь атрибут name. Значения флажков и переключателей включаются, только если они отмечены.
Также можно воспользоваться методом $.ajax().
Файл form.js
$(document).ready(function () {
$("#form").on('submit', function (){
$.ajax({
url: 'form.php',
type: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function(data){
$('#msg').html(data);
}
});
});
});
В нем можно передать больше параметров запроса. Для использования этого сценария измените ссылку на файл сценария в файле .
Если в результате проверки какое-то поле оказывается пустым, выдается соответствующее сообщение в элементе с идентификатором .
Как прочитать данные в формате JSON с помощью jQuery
4.1 Показать товары на странице при загрузке
В папке products откройте файл read-products.js
Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.
Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.
4.2 Показать товары при клике на кнопку
Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.
Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.
Поместите следующий код под showProducts(); предыдущего раздела.
4.3 Создание функции showProducts()
Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.
4.4 Получение списка товаров
Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.5 Создание кнопки «Добавить товар»
Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.6 Создание HTML-таблицы
Мы должны начать строить HTML-таблицу, в которой появится список продуктов.
Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.
4.7 Построение строки таблицы для каждой записи
Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.
Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».
Замените комментарий // здесь будут строки следующим кодом.
4.8 Вставка контента на страницу
Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.
Поместите следующий код после закрывающего тега table
4.9 Изменение заголовка страницы
Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.
Поместите следующий код после кода предыдущего раздела.
База данных
Начнем с создания структуры данных.
Мне поднадоел пример с картриджами, и сегодня я буду работать с некой военной базой данных видов вооружений.
Для этого я создал две таблички — tree и items.
Таблица tree будет содержать иерархию связанных пунктов для выпадающих списков.
treeID — ключ, pID — указатель на родительский пункт, label — текстовая метка для выпадающего списка, а objID — указатель в таблицу items, для конечных элементов дерева.
В таблице items мы разместим описания видов вооружений.
Описание весьма условное. Кроме ключа в таблице есть title — название вооружения и какие то два параметра, которые мы вообще никак не характеризуем. 
AJAX в админ-панели WordPress
С тех пор, как AJAX был встроен в админ-панель WP, использовать функционал AJAX в плагинах стало очень удобно. Небольшой пример. Все делается в одном файле (файле плагина или файле темы functions.php).
#1. Добавляем javascript
Сначала добавляем на страницу админки javascript код, который будет посылать AJAX запрос.
<?php
//add_action( 'admin_print_scripts', 'my_action_javascript' ); // такое подключение будет работать не всегда
add_action( 'admin_print_footer_scripts', 'my_action_javascript', 99 );
function my_action_javascript() {
?>
<script>
jQuery(document).ready( function( $ ){
var data = {
action: 'my_action',
whatever: 1234
};
// с версии 2.8 'ajaxurl' всегда определен в админке
jQuery.post( ajaxurl, data, function( response ){
alert( 'Получено с сервера: ' + response );
} );
} );
</script>
<?php
}
?>
С версии 2.8 javascript переменная определена глобально на всех страницах админки. Используйте её в js коде, как ссылку на файл обработчик AJAX запроса. Обычно это файл /wp-admin/admin-ajax.php. В теме (шаблоне) эта переменная не определена. Чтобы использовать её во фронт-энде, её нужно определить самостоятельно. Как это сделать смотрите ниже.
#2. Создаем PHP функцию
Теперь, создадим PHP функцию, которая будет обрабатывать переданный AJAX запрос. Для этого добавляем следующий код в functions.php (можно в плагин):
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback(){
$whatever = intval( $_POST );
$whatever += 10;
echo $whatever;
// выход нужен для того, чтобы в ответе не было ничего лишнего,
// только то что возвращает функция
wp_die();
}
Тут мы цепляемся на хук wp_ajax_my_action — это динамический хук и выглядит он так: wp_ajax_(action), где вместо (action) вставляется значение переменной передаваемой в первом коде: action = my_action.
Вот и все.
Примера выше достаточно, чтобы начать использовать AJAX в админ-панели WordPress.
По возможности всегда используйте wp_die() вместо die() или exit(), в функции обработки AJAX запроса. Так вы добьетесь лучшей интеграции с WordPress и в случае ошибок в коде, получите данные о них.
PHP код, реализующий работу сервера
В PHP у нас производится отработка команд клиента, запросы к базе данных. Запросов всего два:
- вернуть список опций ветки дерева, по указанному айди родителя (команда load-brunch),
- вернуть данные об единице вооружения (команда load-object).
<?php
//формируем заголовки документа — указываем, что кодировка UTF8
header(‘Content-Type: text/html; charset=utf-8’);
//если команда не задана — выходим сразу
if (empty($_POST)) exit;
//подключаю хелпер для работы с базой
//(там подключение к базе и пара функций)
require_once dirname(__FILE__) . ‘/db.php’;
//инициализация выходного массива данных
$data = array();
//обработка команд
switch ($_POST) {
case ‘load-brunch’:
//загрузка перечня опций
$pid = empty($_POST)? 0 : $_POST;
$res = db_query(«SELECT * FROM tree WHERE pID = :pid», array(‘:pid’ => $pid));
if ($res->num_rows)
while ($r = $res->fetch_object())
$data[] = $r;
break;
case ‘load-object’:
//загрузка карточки вооружения
$id = empty($_POST)? 0 : $_POST;
$res = db_query(«SELECT * FROM items WHERE IDobj = :id», array(‘:id’ => $id));
if ($res->num_rows)
$data = $res->fetch_object();
}
//вывод в JSON формате
echo json_encode($data, true);
|
1 |
<?php //формируем заголовки документа — указываем, что кодировка UTF8 header(‘Content-Type: text/html; charset=utf-8’); //если команда не задана — выходим сразу if(empty($_POST’commmand’))exit; //подключаю хелпер для работы с базой require_once dirname(__FILE__).’/db.php’; $data=array(); switch($_POST’commmand’){ case’load-brunch’ //загрузка перечня опций $pid=empty($_POST’parentID’)?$_POST’parentID’; $res=db_query(«SELECT * FROM tree WHERE pID = :pid»,array(‘:pid’=>$pid)); if($res->num_rows) while($r=$res->fetch_object()) $data=$r; break; case’load-object’ //загрузка карточки вооружения $id=empty($_POST’objectID’)?$_POST’objectID’; $res=db_query(«SELECT * FROM items WHERE IDobj = :id»,array(‘:id’=>$id)); if($res->num_rows) $data=$res->fetch_object(); } echo json_encode($data,true); |
Надеюсь, загрузка данных пояснений не требует.
HTML код
Практически идентичен прошлому примеру.
Мы подключаем библиотеку jQuery и класс — TSEL, создающий связанные списки. TSEL работает с двумя HTML контейнерами, идентификаторы которых мы передадим при инициализации TSEL. Третьим параметром будет url к файлу сервера для обработки ajax запросов.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<script type=»text/javascript» src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script>
<script type=»text/javascript» src=»tsel.js»></script>
</head>
<body>
<div id=»selector»>
<!— Здесь будут выпадающие списки —>
</div>
<div id=»result»>
<!— Здесь будет описание ед. вооружения —>
</div>
<script type=»text/javascript»>
//получаем экземпляр, управляющего списками класса
//попутно инициализируем его
$(function () {
var TS = new TSEL({
selectorID: «selector»,
resultID: «result»,
ajaxUrl: «/ajax.php»});
});
</script>
</body>
</html>
|
1 |
<!DOCTYPE html> <html> <head> <meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″/> <script type=»text/javascript»src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script> <script type=»text/javascript»src=»tsel.js»></script> </head> <body> <div id=»selector»> <!—Здесьбудутвыпадающиесписки—> </div> <div id=»result»> <!—Здесьбудетописаниеед.вооружения—> </div> <script type=»text/javascript»> //получаем экземпляр, управляющего списками класса $(function(){ varTS=newTSEL({ selectorID»selector», resultID»result», ajaxUrl»/ajax.php»}); }); </script> </body> </html> |
Как устроен AJAX
Основа AJAX — объект XMLHttpRequest, который и отвечает за все запросы. Раньше его поддерживали не все браузеры, поэтому нужно было подключить отдельно библиотеку jQuery, в которой этот объект есть. Сейчас почти все браузеры научились поддерживать этот объект напрямую.
Вся магия асинхронных запросов AJAX основана на работе с DOM-объектами страницы в браузере:
- Когда браузер получает исходный код страницы, он внутри себя строит много виртуальных элементов на основе этого кода: заголовки, картинки, абзацы, ссылки и всё остальное.
- К каждому элементу модели можно обратиться отдельно, чтобы поменять его свойства или содержимое. Например, через JavaScript можно поменять текст в заголовке или перекрасить фон страницы, не перезагружая страницу.
- JavaScript делает запрос на сервер, получает ответ и дальше творит со страницей то, что нужно, в зависимости от самой программы. Отправить запрос и получить ответ ничем принципиально не отличается от чтения и записи переменных.
Метод jQuery.Ajax()
Это основной метод с которым вам придётся работать, остальные методы, такие как $.get() или $.post() являются лишь частным случаем метода $.ajax(). Давайте рассмотрим основные атрибуты и события метода:
| Параметр | Описание параметра | Тип данных |
|---|---|---|
| async | Асинхронность запроса, по умолчанию true | логический |
| cache | Флаг кеширование данных браузером, по умолчанию true | логический |
| contentType | по умолчанию «application/x-www-form-urlencoded» | строка |
| data | передаваемые данные, могут быть представлены в виде объекта, например или в виде строки: | объект или строка |
| dataFilter | фильтр для входных данных (по сути callback функция позволяющая отфильтровать данные перед отправкой) | функция |
| dataType | тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default), чаще всего это json | строка |
| global | тригер — отвечает за использование глобальных событий Ajax, по умолчанию true | логический |
| ifModified | тригер — проверяет были ли изменения в ответе сервера, чтобы не отправлять запрос повторно, по умолчанию false | логический |
| type | GET либо POST | строка |
| url | url запрашиваемой страницы/скрипта | строка |
| Параметр | Описание параметра | Тип данных |
|---|---|---|
| beforeSend | callback функция вызываемая перед отправкой запроса (например можно запустить анимацию показывающую пользователю что запрос отправляется и/или заблокировать кнопку отправки, чтобы он не нажимал на неё несколько раз) | функция |
| success | callback функция вызываемая в случае успешной отправки данные и получения ответа с сервера | функция |
| error | вызывается в случае ошибки HTTP запроса | функция |
| complete | срабатывает после завершения запроса (т.е. после success или error) | функция |
В приведённом выше скрипте, мы будем запрашивать информацию о погоде обращаясь к скрипту /ajax.php методом GET. Чтобы ajax.php «понял» что мы от него хотим, мы передаём объект с командой { action: ‘get_weather’ } т.е. «Действие = получить погоду». После успешного выполнения запроса полученный результат (условимся, что это будет строка) добавляем на страницу в блок с классом result.
Работа данного примера может выглядеть так:
Давайте рассмотрим другие методы jQuery для работы с Ajax запросами.
Как сделать пагинацию данных с помощью jQuery AJAX?
Изменение URL-адреса JSON
Чтобы сделать нумерацию страниц, нам нужно изменить URL-адрес JSON. Содержимое этих новых данных JSON будет включать узел «пагинации». Похоже на следующее.
Поэтому мы изменим URL JSON с:
На:
Это означает, что мы должны что-то изменить в нашем коде. Смотрите изменения в следующем разделе.
10.3 Добавим пагинацию HTML
Откройте app/products/products.js, найдите закрывающий тег table и добавьте после него следующий код.
Вам так же необходимо изменить URL домашней страницы из предыдущего руководства в соответствии с вашим URL.
Файл находится ваша_корневая_папка/api/config/core.php.
В моём случае я изменяю
На:
