jQuery - Ajax Load

jQuery load() metoda

jQuery metoda load() učitava podatke s poslužitelja i vraća HTML u odabrani element. Ova metoda pruža jednostavan način za učitavanje podataka asinkrono s web servera. Osnovna sintaksa ove metode može se napisati kao: 

$(selector).load(URL, data, complete);

Parametri metode load() imaju sljedeće značenje:

  • Potrebni parametar URL navodi URL datoteke koju želite učitati.
  • Izborni parametar podataka specifikuje skup niza upita (tj. parovi ključ/vrijednost (key/value)) koji se šalje web serveru zajedno sa zahtjevom.
  • Izborni kompletan parametar u osnovi je funkcija povratnog poziva koja se izvršava kad se zahtjev dovrši. Povratni poziv se aktivira jednom za svaki odabrani element.

Stavimo ovu metodu u stvarnu upotrebu. Kreirajte prazn HTML fajlt pod nazivom "test-content.html" (ili neki drugi naziv) i spremite ga negdje na svoj web server. Ukoliko ne znate šta je WEB SERVER pogledajte leciju PHP - Početak rada. Sada napišite sljedeći HTML kod u ovaj fajl: 

<h1>Ajax Demo</h1>
<p id="hint">Ovo je jednostavan primjer Ajax-ovog učitavanja.</p>
<p><img src="sky.jpg" alt="Cloudy Sky"></p>

Sada stvorite još jedan HTML fajl recite "load-demo.html" i spremite ga na isto mjesto na kojem ste spremili prethodni fajl. Sad napišite sljedeći HTML kod: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Učitavanje podataka iz vanjske datoteke pomoću Ajaxa u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/test-content.html");
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Kliknite dugme za učitavanje novog sadržaja u DIV okvir</h2>
    </div>
    <button type="button">Učitaj sadržaj</button>
</body>
</html>

Na kraju, otvorite ovu stranicu u svom pretraživaču i kliknite dugme "Učitaj sadržaj". Vidjećete da je sadržaj DIV okvira zamijenjen HTML sadržajem fajla "test-content.html".

Dalje, funkcija povratnog poziva može imati tri različita parametra:

  • responseTxt - Sadrži rezultovajući sadržaj ako zahtjev uspije.
  • statusTxt - Sadrži status zahtjeva poput uspjeha ili greške.
  • jqXHR - Sadrži objekt XMLHttpRequest.

Evo izmijenjene verzije prethodnog primjera koja će korisniku prikazati poruku o uspjehu ili grešci, zavisno o statusu zahtjeva. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prikazivanje statusa zahtjeva za učitavanje Ajaxa u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/test-content.html", function(responseTxt, statusTxt, jqXHR){
            if(statusTxt == "success"){
                alert("Novi sadržaj je uspješno učitan!");
            }
            if(statusTxt == "error"){
                alert("Greška: " + jqXHR.status + " " + jqXHR.statusText);
            }
        });
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Kliknite dugme za učitavanje novog sadržaja u DIV okvir</h2>
    </div>
    <button type="button">Učitaj sadržaj</button>
</body>
</html>

Učitavanje fragmenata stranice (Loading Page)

jQuery metoda load() takođe nam omogućava dohvatanje samo dijela dokumenta. To se jednostavno postiže dodavanjem url parametra s razmakom, iza kog sljedi jQuery selektor, pogledajmo sljedeći primjer kako bi bio jasniji. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Učitavanje dijela spoljne stranice pomoću Ajaxa u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/test-content.html #hint");
    });
});
</script>
</head>
<body>
    <div id="box">
        <h2>Kliknite dugme za učitavanje novog sadržaja u DIV okvir</h2>
    </div>
    <button type="button">Učitaj sadržajt</button>
</body>
</html>

jQuery selektor #hint unutar url parametra, specifikuje dio fajla "test-content.html" koji će se umetnuti u DIV okvir, koji je element koji ima atribut ID s naznakom vrijednosti tj. id="hint", pogledajte prvi primjer.