load

загружает данные из внешнего источника данных

promise load(string| function| WebixProxy url, [string type,function callback,boolean clear] );
urlstring| function| WebixProxyпуть к данным
typestring(необязательный) тип данных для загрузки: "json" (default), "xml", "jsarray", "csv"
callbackfunction(необязательный) колбэк-функция
clearbooleanесли true, метод очистит теущие данные перед загрузкой новых
promiseобъект "promise"

Example

$$("table").load("data.xml", "xml");

Related samples

Details

URL данных

url параметр автоматически передается в метод load(). Он может быть задан как:

  • string - путь к файлу или скрипту
$$("table").load("some.php");
  • function - код, который получит и структурирует данные
$$("table").load(function(){
    return webix.ajax().post("some.php", params);
});
  • object - proxy-объект для загрузки
$$("list").load({
    $proxy:true,
    load:function(view, params){
        return webix.ajax().get("some.php", params);
    }
});

Тип данных

По умолчанию компоненты ожидают данные в JSON-формате. Если вы загружаете данные в этом формате, нет необходимости задавать datatype:

$$("component_id").load("data.json");

Если данные приходят с сервера в другом формате, задайте формат во втором параметре метода load():

$$("component_id").load("data.xml","xml");

Promise

Метод возвращает promise, который содержит конечный результат AJAX-запроса. Вы можете использовать promise, чтобы отловить результат запроса (успешный или нет).

Promise загрузки успешно завершается (resolve) при успешном выполнении запроса, как только данные приходят на клиент. Этот момент можно захватить в then(). Обработчик в then() получает объект data с функциями для обработки ответа с сервера:

$$("table").load("some.php").then(function(data){
    /* ...ваш обработчик */
    data = data.json(); // получить данные в JSON
});

Ошибку можно отловить с помощью методов fail() / catch() (альтернативное название метода fail() в Webix):

$$("table").load("some.php").fail(function(xhr){
    /* ...ваш обработчик */
    console.log(xhr.responseText);
});

Чтобы выполнить код в случае любого результата запроса (успешного или неудачного), используйте finally():

$$("table").load("some.php").finally(function(){
    /* ...ваш обработчик */
});

Узнайте больше по ссылкам:

Колбэк

В качестве альтернативы для promise API, вы можете использовать колбэк для выполнения действий после завершения загрузки. Колбэк может быть функцией или объектом.

Функция получает 3 параметра:

  1. Текст ответа с сервера
  2. объект данных ответа
  3. Необработанный объект HTTP-запроса
$$("component_id").load("data.json", function(text, data, http_request){
    const d = data.json();
    // ваш код
});

У объекта может быть 2 свойства для обработки успешного или неудачного результата запроса:

  • success (для успешных запросов)
  • error (для ошибок)
$$("component_id").load("data.xml", "xml", {
    success:function(text, data, http_request){
        webix.message("success");
    },
    error: function(text, data, http_request){
        webix.alert("error");
    }
});

Если вы задаете тип данных, колбэк (объект или функцию) нужно передать методу load() третьим параметром:

$$("component_id").load("data.xml","xml",function(text, data, http_request){
    // ваш код
});

POST и синхронная загрузка

Метод load отправляет GET запрос. Если вы хотите отправить POST или синхронный запрос, вы можете использовать одну из двух опций:

1. создайте proxy:

$$("component_id").load({
    $proxy:true,
    load(view,params){
        return webix.ajax().post("some.json",params);
    }
});

2. отправьте запрос с помощью webix.ajax() и используйте parse метод чтобы загрузить данные в компонент:

// синхронная загрузка данных
var xhr = webix.ajax().sync().get("some.json");
$$("component_id").parse(xhr.responseText);
// использование POST для загрузки данных
webix.ajax().post("mydata.php", "some=value").then(function(data){
    $$("component_id").parse(data.text());
});
See also
Наверх
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of javascript datatables product.