BX.ajax — функция для отправки аяксовых запросов
Функция возвращает ссылку на объект XMLHttpRequest
, при помощи которого осуществляется запрос. В случае успеха запроса
будет вызван обработчик onsuccess
. В качестве параметра будет результат запроса.
Если параметр processData
установлен в true
, то обработка будет в зависимости от типа данных который указывается в параметре dataType
, возможны следующие варианты:
html
результат будет очищен от js-кода. Код будет выполнен после передачи данных обработчику. Перед передачей будут выполнены все скрипты с атрибутомbxrunfirst
, или все скрипты, если параметрscriptsRunFirst
установлен вtrue
script
полученный результат будет передан обработчику и выполнен. Что раньше — определяется параметромscriptsRunFirst
json
результат будет интерпретирован как описание объекта в форматеjson
, обработчик получит объект
Если подключена библиотека для работы с localStorage (core_ls)
, то помимо перечисленных параметров, можно использовать
дополнительные параметры:
lsId
строковой идентификатор для передачи данных запроса между различными вкладкамиlsTimeout
время жизни данных запросаlsForce
false|true
Эти параметры предназначены для интерфейсов, постоянно опрашивающих сервер с целью получения каких-либо данных. В этом
случае данные запроса будут сохраняться в localStorage
, и если в любой вкладке текущего браузера будет сделан запрос с
тем же самым lsId
, то вместо совершения запроса обработчик получит данные, сохраненные в localStorage
. Соответственно,
lsTimeout
должен быть чуть меньше интервала отправки запросов. Параметр lsForce
позволяет принудительно отправить запрос
в обход проверки наличия данных в localStorage
и обновить это данные.
Запрос
Пример рабочего скрипта, когда на клиенте делается запрос к файлу обработчику:
// когда DOM готов
BX.ready(function () {
// ajax запрос
BX.ajax({
// файл на который идет запрос
url: 'test.php',
// метод запроса GET/POST
method: 'POST',
// параметры передаваемый запросом
data: {
NAME: 1
},
// ответ сервера лежит в data
onsuccess: function(data) {
console.log(data);
},
// выполнится в случае ошибки
onfailure: function () {
console.log("error");
},
})
}
Возможные значения для BX.ajax
:
url
URL запросаdata
POST данные для отправки (строка или объект)method
метод запросаGET|POST
dataType
тип загрузки данныхhtml|json|script
timeout
время ожидания запроса в секундах.0
для браузера значение по умолчаниюasync
является ли запрос асинхронным или нетtrue|false
processData
любая обработка данных отключена, если значениеfalse
, выполняется только обратный вызовfalse|true
scriptsRunFirst
следует ли запускать все найденные скрипты перед вызовом onsuccess. тег script может иметь атрибутbxrunfirst
, чтобы включить этот флаг только для него самогоfalse|true
emulateOnload
нужно ли эмулировать событиеBX.ajax.onload_403613
для загруженных скриптовtrue|false
skipAuthCheck
следует ли проверять сбой авторизации, должно быть установлено значениеtrue
для запросовCORS
start
немедленно отправить запрос, если значение равноfalse
, запрос может быть запущен вручную с помощью возвращаемого объектаXMLHttpRequest
cache
в случае значенияfalse
к параметруURL
будет добавляться случайный кусок, чтобы избежать браузерного кэшированияtrue|false
preparePost
установлен лиContent-Type x-www-form-urlencoded
вPOST
запросеtrue|false
headers
добавьте дополнительные заголовки, например:[{'name': 'If-Modified-Since', 'value': 'Wed, 15 Aug 2012 08:59:08 GMT'}, {'name': 'If-None-Match', 'value': '0'}]
lsTimeout
локальное хранилище данныхTTL
, бесполезно безlsId
lsForce
следует ли принудительно выполнять запрос вместо использования данныхlocalStorage
, бесполезно безlsId
onsuccess
функция-обработчик результатаonfailure
функция-обработчик ошибки
Отправка формы в библиотеке BX
Допустим на странице имеем некую простую формы, данные с которой нам надо отправить:
<form id="bx_custom_form">
<input type="text" name="name" placeholder="Ваше имя" />
<input type="text" name="phone" placeholder="Номер телефона" />
<input type="file" name="file">
<input type="submit" value="Отправить" />
</form>
Давайте напишем JS
код с использованием библиотеки Bitrix JS
. Данный с формы будем получить при помощи интерфейса FormData
:
BX.ready(function () {
// получаем форму
let customForm = BX("bx_custom_form");
// вешаем обработчик событий на отправку формы
BX.bind(customForm, "submit", BX.proxy(sendForm, this));
// функция отправки
function sendForm(e) {
BX.PreventDefault(e);
// с формой работаем через объект FormData
let data = new FormData(customForm);
// ajax запрос
BX.ajax({
url: "/ajax/sendForm.php",
data: data,
method: "POST",
dataType: "json",
processData: false,
preparePost: false,
// действия в случаи успеха
onsuccess: function (data) {
console.log(data);
},
// действия в случаи ошибки
onfailure: function () {
console.log("error");
},
});
}
});