Jquery load html example

.load()

Загружает данные с сервера (html) и вставляет в указанный элемент.

version added: 1.0 .load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

Данный метод это лёгкий способ извлечения данных с сервера. Он представляет из себя альтернативу использования метода $.get(url, data, success). В случае успешного запроса, метод .load() формирует HTML содержание, которое может быть вставлено на страницу. Это значит, что мы можем делать запросы следующим образом:

Если селектора не существует — в нашем случае, если в документе нет блока с — Ajax запрос не будет выполнен.

Функция обратного действия

Если задана функция обратного действия «complete», она будет выполнена формирования и вывода HTML. Она будет запускаться для каждого объекта коллекции jQuery.

$('#result').load('ajax/test.html', function() < alert('Load was performed.'); >);

Если в документе нет элемента с ID «result,» метод .load() не будет выполнен.

Метод запроса

В случает использования объекта в качестве второго аргумента, то будет выполнен метод POST; в противном случае, GET.

Загрузка фрагмента страницы

Метод .load() в отличии от $.get(), позволяет нам извлечь часть загружаемой страницы. Этого можно достичь, если после адреса файла указать селектор той области страницы, которую нужно извлечь.

Мы можем чуть исправить пример, указанный выше, чтобы извлечь только часть документа:

$('#result').load('ajax/test.html #container');

При выполнении, метод извлекает содержимое файла ajax/test.html, но потом jQuery парсит результат и, благодаря селектору, находит тот фрагмент, который нужен. Только это содержание в результате будет вставлено на страницу, всё остальное будет опущено.

Выполнение скрипта

При использовании метода .load() с указанием селектора, контент будет пропущен через метод .html(), таким образом все скрипты будут удалены. При загрузке без селектора, все скрипты будут загружены в соответствии с приоритетом:

В данном примере весь JavaScript, загруженный в элемент #a, как часть документа, будет успешно выполнен.

Однако, в следующем случае, скрипты загруженного документа, прикреплённого к элементу #b не будут выполнены:

Примеры

Пример: загружаем основную навигацию страницы в “подвал”, в виде элементов списка.

    body   Footer navigation:    

Пример: отобразить предупреждение, если ajax запрос прошёл неудачно.

    body   Successful Response (should be blank): Error Response:    

Пример: Загрузить содержимое feeds.html в специально отведённый для этого div.

Пример: передача массив данных на сервер.

Пример: передача данных на сервер методом POST и использование метода обратного действия.

$("#feeds").load("feeds.php", , function()< alert("The last 25 entries in the feed have been loaded"); >);

Шпаргалка jQuery:

• Ajax
  • Global Ajax Event Handlers
    • .ajaxComplete()
      • :button
      • :checkbox
      • :checked
      • :disabled
      • :enabled
      • :file
      • :focus
      • :image
      • .serializeArray()
      • .serialize()
      • jQuery.param()
      • jQuery.ajax()
      • jQuery.ajaxSetup()
      • jQuery.ajaxPrefilter()
      • jQuery.ajaxTransport()
      • jQuery.get()
      • jQuery.post()
      • .load()
      • jQuery.getJSON()
      • jQuery.getScript()
      • .serialize()
      • .serializeArray()
      • jQuery.param()
      • .val()
      • .blur()
      • .change()
      • .focus()
      • .addClass()
      • .hasClass()
      • .removeClass()
      • .toggleClass()
      • .html()
      • .removeAttr()
      • .prop()
      • .removeProp()
      • .attr()
      • .val()
      • Collection Manipulation
        • jQuery.param()
        • .data()
        • .removeData()
        • Class Attribute
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .clone()
          • .wrap()
          • .wrapAll()
          • .wrapInner()
          • .unwrap()
          • .append()
          • .appendTo()
          • .html()
          • .text()
          • .prepend()
          • .prependTo()
          • .after()
          • .before()
          • .insertAfter()
          • .insertBefore()
          • .unwrap()
          • .remove()
          • .empty()
          • .detach()
          • .replaceAll()
          • .replaceWith()
          • .removeProp()
          • .removeAttr()
          • .prop()
          • .attr()
          • .val()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • jQuery.holdReady()
          • jQuery()
          • jQuery.noConflict()
          • jQuery.when()
          • .addClass()
          • .hasClass()
          • .removeClass()
          • .toggleClass()
          • .css()
          • .height()
          • .width()
          • .innerHeight()
          • .innerWidth()
          • .outerHeight()
          • .outerWidth()
          • .offset()
          • .position()
          • .scrollLeft()
          • .scrollTop()
          • .clearQueue()
          • .dequeue()
          • .data()
          • jQuery.hasData()
          • jQuery.removeData()
          • jQuery.dequeue()
          • .removeData()
          • jQuery.data()
          • .queue()
          • Custom
            • .clearQueue()
            • .dequeue()
            • .queue()
            • .clearQueue()
            • .dequeue()
            • jQuery.dequeue()
            • jQuery.data()
            • .queue()
            • jQuery.proxy()
            • callbacks.add()
            • callbacks.disable()
            • callbacks.disabled()
            • callbacks.empty()
            • callbacks.fire()
            • callbacks.fired()
            • callbacks.fireWith()
            • callbacks.has()
            • callbacks.lock()
            • callbacks.locked()
            • callbacks.remove()
            • jQuery.Callbacks()
            • deferred.always()
            • deferred.done()
            • deferred.fail()
            • deferred.notify()
            • deferred.notifyWith()
            • deferred.progress()
            • deferred.promise()
            • deferred.reject()
            • deferred.rejectWith()
            • deferred.resolve()
            • deferred.resolveWith()
            • deferred.state()
            • deferred.then()
            • Basics
              • Универсальный селектор (“*”)
              • jQuery( «.class» )
              • Селектор элементов (“element”)
              • Селектор ID (“#id”)
              • Множественный (“selector1, selector2, selectorN”)
              • Селектор по префиксу [name|=”value”]
              • Селектор содержащий значение [name*=»value»]
              • Селектор, содержащий слово [name~=»value»]
              • Селектор по атрибуту, на конце которого [name$=»value»]
              • Селектор по равенству [name=»value»]
              • Селектор по неравенству [name!=»value»]
              • Значение атрибута начинается с [name^=»value»]
              • Селектор по наличию атрибута [name]
              • Множественный селектор по атрибуту [name=»value»][name2=»value2″]
              • :animated Selector
              • :eq()
              • :even
              • :first
              • :focus
              • :gt()
              • :header
              • :lang()
              • :last
              • :lt()
              • :first-child
              • :first-of-type
              • :last-child
              • :last-of-type
              • :nth-child()
              • :nth-last-child()
              • :nth-last-of-type()
              • :nth-of-type()
              • :only-child
              • :only-of-type
              • :contains()
              • :empty
              • :has()
              • :parent
              • Browser Events
                • .resize()
                • .scroll()
                • .ready()
                • .bind()
                • .delegate()
                • jQuery.proxy()
                • .off()
                • .one()
                • .trigger()
                • .triggerHandler()
                • .unbind()
                • .undelegate()
                • event.currentTarget
                • event.data
                • event.delegateTarget
                • event.isDefaultPrevented()
                • event.isImmediatePropagationStopped()
                • event.isPropagationStopped()
                • event.metaKey
                • event.namespace
                • event.pageX
                • event.pageY
                • event.preventDefault()
                • event.relatedTarget
                • event.result
                • event.stopImmediatePropagation()
                • event.stopPropagation()
                • event.target
                • event.timeStamp
                • event.type
                • event.which
                • .blur()
                • .change()
                • .focus()
                • .focusin()

                ТОП-10 Хостеров:

                Шпаргалки:

                Получать новые уроки на E-mail:

                RSS подписка

                

                

                Авторизация

                Рекомендуем

                © 2023 Евгений Попов. Все права защищены. Служба поддержки
                Сайт мониторится с помощью сервиса ping-admin 🙂

                Источник

                .load()

                .load( url [, data ] [, complete ] ) Возвращает: jQuery

                Описание: Загрузка данных с сервере и размещение полученного HTML в указанный элемент.

                Добавлен в версии: 1.0 .load( url [, data ] [, complete ] )

                Примечание: обработчик события окончания загрузки также называется .load() . jQuery определяет какой именно метод вызван, на основании того какие аргументы передаются в метод.

                Этот метод самый простой способ получить данные с сервера. Он примерно эквивалентен коде $.get(url, data, success) , за исключеничем того что этот метод а не глобальная функция и неявный обработчик обратного вызова. Когда возвращается успешный ответ (т.е. когда значение textStatus равно «success» или «notmodified»), .load() устанавливает HTML содержимое в указанный элемент из возвращенных данных. Это означает, что в большинстве случаев, использование этого метода будет выглядеть следующим образом:

                Если не будет найден элемент соотвествующий заданному селектору, то, в этом случае, Ajax запрос не будет отправлен.

                Функция обратного вызова

                Если функция «complete» задана, то она выполняется после обработки и вставки HTML. Эта функция будет вызвана для каждого элемента в коллекции jQuery и this внутри нее будет указывать на DOM элемент.

                $( "#result" ).load( "ajax/test.html", function() 
                 alert( "Load was performed." );
                >);

                В этих примерах выше, если текущий документ не содержит элемента с ID равным "result," то метод .load() не выполнится.

                Метод запроса

                Метод POST будет исползован если в метод .load() передан объект, иначе будет использован GET.

                Загрузка фрагмента страницы

                Метод .load() , в отличие от $.get() , позволяет указать часть удаленного документа для вставки. Это доступно при помощи специального синтаксиса в параметре url . Если один или несколько символов пробела включены в строку, то первое слово, после первого пробела, будет предполагать jQuery селектор, который определит какая часть будет вставлена.

                Мы можем изменить код из примера выше, так чтобы использовалась только часть полученного документа:

                $( "#result" ).load( "ajax/test.html #container" );

                Когда этот методы выполняется, извлекается содержимое ajax/test.html , но затем jQuery разбирает полученный документ и ищет элемент с ID равным container . Этот элемент, со всем своим содержимым, будет вставлен в элемент с ID равным result и остальная часть загруженного документа будет проигнорирована.

                jQuery используется свойство браузера .innerHTML , чтобы проанализировать полученный документ и вставить его в текущий документ. Во время этого процесс, браузре часто отфильтровывает такие элементы из документа как: , или . В результате, элемент полученный при помощи метода .load() может быть не таким же, как если получить этот документ в браузере напрямую.

                Выполнения скриптов

                Когда вызван .load() при помощи URL без выражения селектора, содержание передается в .html() до удаления скриптов. Это выполняется блоки скриптов, до их удаления. Если .load() вызван с выражением селектора в URL, то скрипты скрипты будут удалены до обновления DOM и поэтому не будут выполнены. Пример для обоих случае приведен ниже:

                Здесь, любой JavaScript загруженный в #a как часть документа будет успешно выполнен.

                В следующем случае, блоки скрипта перед вставкой в #b будут удалены и не будут выполнены:

                $( "#b" ).load( "article.html #target" );

                Дополнительные примечания:

                • Из-за ограничений безопасности браузера, большинство "Ajax" запросов подверждено политике того же происхождения, запросы не могут быть выполнены к другим доменам, поддоменам, порту или протоколу.

                Источник

                Читайте также:  Responsive web design with html and css