.load()

kategorie: Ajax

.load(url, [ data ], [ success(responseText, textStatus, XMLHttpRequest) ]) vráti: jQuery

Načíta dáta zo servera a vloží vrátené HTML do vybraného elementu.

Táto metóda je najjednoduchší spôsob ako načítať dáta zo servera. Je ekvivalentom k $.get(url, data, success), s tým rozdielom, že táto metóda je skôr ako globálna funkcia a tá má callback funkciu. Ak je zistená úspešná odozva (napr. keď textStatus je "success" alebo "notmodified"), .load() nastaví HTML obsah vybranému elementu do vrátených dát. To znamená, že najčastejšie použitie tejto metódy môže byť veľmi jednoduché:

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

Poskytnutý callback, ak nejaký je, je spustený po vykonaní tohto post-procesu:

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

V dvoch vyššie uvedených príkladoch, v prípade, že aktuálny dokument neobsahuje prvok s ID "result", sa metóda .load() nevykoná.

POST metóda sa používa ak sú dáta poskytované ako objekt, inak je použitý GET.

Poznámka: Udalosť manipulujúca suite taktiež obsahuje metódu nazvanú .load(). Tá je spustená v závislosti od zoznamu vstupných argumentov.

Načítanie časti stránky

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

Keď je táto metóda spustená, načíta sa celý obsah ajax/test.html, a potom jQuery parsuje dokument, aby našiel element s ID container. Tento element spolu s jeho obsahom je následne vložený do elementu s ID result, a zvyšok načítaného dokumentu je zlikvidovaný.

jQuery na parsovanie získaného dokumentu používa vlasnosť .innerHTML. Počas tohto procesu, prehliadače často filtrujú elementy z dokumentu, a to elementy <html>, <title> alebo <head>. Ako výsledok, elementy získané .load(), nemusia byť presne rovnaké, ako keby boli získané priamo prehliadačom.

Ďalšie poznámky

Vzhľadom k bezpečnostným obmedzeniam prehliadačov, je väčšina Ajax požiadaviek rovnakého pôvodu; požiadavky nemôžu úspešne načítať dáta z inej domény, subdomény alebo protokolu.

Priklady:

Načíta navigáciu z pätičky hlavnej stránky do očíslovaného zoznamu.

 <!DOCTYPE html>
<html>
<head>
   <style>
      body{ font-size: 12px; font-family: Arial; }
   </style>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>  
   <b>Footer navigation:</b>
   <ol id="new-nav"></ol>

      <script>
         $("#new-nav").load("/ #menu-bot li");
      </script>
</body>
</html>

Načíta feeds.html súbor do div s ID feeds.

 $("#feeds").load("feeds.html");

Predá pole dát serveru.

 $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

Rovnako ako vyššie, ale navyše s POST parametrami pre server a callback, ktorý sa spustí akonáhle server zakončí odpoveď.

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });