Свойства
.load() — Загрузка данных с сервера и размещение возвращаемого HTML в указанный элемент.
url
Типа: Строка
Строка, содержащая URL, к которому направляется запрос.
Данные
Тип: Объект или Строка
Простой объект или строка, которая отправляется на сервер с запросом.
Функция «выполнено»
Тип: Функция( Строка responseText, Строка textStatus, jqXHR jqXHR )
Функция обратного вызова, которая выполняется, когда запрос завершается
.get() — Загрузка данных с сервера, используя запрос HTTP GET.
url
Типа: Строка
Строка, содержащая URL, к которому направляется запрос.
Данные
Тип: Объект или Строка
Простой объект или строка, которая отправляется на сервер с запросом.
Функция «выполнено»
Тип: Функция( Строка responseText, Строка textStatus, jqXHR jqXHR )
Функция обратного вызова, которая выполняется, когда запрос завершается.
Тип данных
Тип: Строка
Тип данных, ожидаемых от сервера. По умолчанию: Intelligent Guess (XML, JSON, script или HTML).
Таким образом мы получаем почти одинаковые функции за исключением одного НО , который пришел с опытом. Если мы хотим подключить содержимое файла и не более того, например содержимое файла head.html, и поместить его в секцию , то обе функции дадут нам один и тот же результат. Но если нам надо дополнять содержимое секций(head, div), то есть если мы уже имеем какой-то контент, то тут функция .load() заменит полностью содержимое блока, а при любой попытки использовать функции JQUEY для дополнения, например получить текст и сделать html() + ..., то результатом будет вечное зацикливание дописанных функций.
Когда в то же время функция .get() работает с остальными функциями (.append(), .html()) уже разумно и не вызывает зацикливание. Но то же не стоит забывать, что по умолчанию .get() заменяет контент полностью, а если использовать в функции success() appen(), то код дополниться.
Пример
.load()
$('article').each(function () {
$(this).load("template/head.html"); // загрузит в страницу и заменит код блока article
});
.get()
$('article').each(function () {
$(this).get("template/head.html"); // загрузит в страницу и заменит код блока article
});
.load()
$('article').each(function (i, elem) {
$(this).load("template/head.html", function (data) {
$(elem).append(data);
}); // загрузит в страницу и дополнит код head, вызвав зацикливание break, continue не помогут
});
.get()
$('article').each(function (i, elem) {
$(this).get("template/head.html", function (data) {
$(elem).append(data);
}); // загрузит в страницу и дополнит код head
});
.load() — функция для обращение больше к PHP скриптам из HTML файла;
.get() — функция для общение между HTML файлами или для получения дополняемого контента файла.
Комментарии (13)
Ashot
28.03.2016 11:21$('article').each(function (i, elem) { $(this).load("template/head.html", function (data) { $(elem).append(data); }); // загрузит в страницу и дополнит код head, вызвав зацикливание break, continue не помогут });
А зачем в колбеке.loadаппендить результат в тот же элемент? Методload— это, скажем так, сахар для ajax-запросов: посылает запрос и результат(HTML) сразу вставляет в элемент, на котором он вызван(о чём в документации вполне доступно написано).
по умолчанию .get() заменяет контент полностью
Он ничего не заменяет — вся его работа заключается в отправке запроса и получении ответа.
.load() — функция для обращение больше к PHP скриптам из HTML файла;
.get() — функция для общение между HTML файлами или для получения дополняемого контента файла.
Эти утверждения высосаны из пальца:
.load— выше уже написал для чего он
.get— получение данных ajaxом данных по get-запросу (а сам он в свою очередь является обёрткой над методом.ajax()`)
В общем, подводные камни вы себе сами придумали, если честно.
mepihin
28.03.2016 11:33-1у меня была задача: получить содержимое из файла и дополнить head ими, то есть оставить что есть и добавить из файла.
load — заменял все полностью, а на дополнение вызывал рекурсию
M-A-X
28.03.2016 11:42Это никакие не подводные камни.
mepihin
28.03.2016 11:42А что это тогда? Чтобы я знал на будущее и не делал таких ошибок
M-A-X
28.03.2016 11:58.load() — для тупого вставляния контента в какую-то область.
.get() — более продвинутый, можно сделать что угодно, есть обработчик события, настройки
Но я советую использовать .ajax() — вся мощь ajax в jquery.
Zenitchik
28.03.2016 11:58.load() — функция для обращение больше к PHP скриптам из HTML файла;
.get() — функция для общение между HTML файлами или для получения дополняемого контента файла.
Странный вывод. Я почему-то думал, что jQuery.ajax и все обёртки над ним служат для обмена данными с сервером. А откуда берётся ответ — генерится скриптом или из статического файла берётся — вопрос не актуальный.
spmbt
28.03.2016 13:12На мой взгляд, разбирать конкретные баги текущих версий jQuery — полезно, но их так надо и называть, и, как максимум, если есть время на разбор причин, писать багрепорты. Эта библиотека несколько раз переписывалась довольно глубоко с целью устранить системные ошибки и так будет далее. Над ней работают десятки человек. Поэтому в таких статьях самое полезное, что можем дать сообществу и получить — рассказать о конкретных багах.
Что касается .ajax(), присоединяюсь к комментатору, который советует пользоваться общей функцией $.ajax(). Всё остальное — надстройки и побочные эффекты, которые потом будут затруднять искать вызовы AJAX в коде проекта.
(А то, что $.ajax не эмулирует работу с файловой системой без сервера, мне лично давно вообще не нравилось, и приходилось делать нативные вызовы в случаях (весьма частых), когда при тестировании хочется заменить удалённый или локальный сервер файлами. В нативном вызове всё это начинало работать, когда чуть изменишь анализ возврата статуса, а в jQuery это, конечно, возможно, но надо копаться в реализации и что-то подправить в глубине её функции. В следующей версии либы это всё усложняется, и нет смысла следить и делать патчи, нативно всё намного проще.)psvg42
28.03.2016 15:35А то, что $.ajax не эмулирует работу с файловой системой без сервера, мне лично давно вообще не нравилось…
Это не задача $.ajax, поднять статический файловый http сервер дело 5 минут, например таже idea умеет это из коробки.spmbt
02.04.2016 00:28Не у каждого же есть знания о том, как поднять сервер, и не всегда есть желание тратить время, чтобы посмотреть демо из архива. тогда эмуляция сервера помогает — отправить кому-то демо, не требующее сервера или хранить у себя версии проектов в архивах.
rtdllnn
Все это в документации описано.
mepihin
Я не уверен, что там описаны нюансы про зацикливание вывода контента и дополняемости данных. На официальном сайте я нашел описание функций и примеры, но вот конкретного описание пробоем использования не было.
medved6216
Юноша, Вы либо не уверены, либо Вы прочитали документацию по jQuery и решили писать статью.
Если Вы не уверены, то не надо писать, то в чем не уверены. Если Вы позиционируете себя как "Разработчик инновационного программного обеспечения в сфере веб приложений и прикладного программного обеспечения под платформы: Windows, Linux и Android" (дословно из профиля), то извольте разбираться в направлениях о которых пишите.
P.S. (для автора): Любую документацию нужно читать на официальном сайте, не советую читать "переведенку" на сомнительных ресурсах, в которых только и будет описание передаваемых данных и примеры.
P.S. (для стариков): Последнее время молодежь активизировалась писать "ересь", как с этим бороться ?! ;)
Еще вопросы: