Prvo kreirati folder u kojem sa radi  pod nazivom fajlovi ...

  • index.html
  • podaci.txt
  • osobe.json

Koristeći šablon (!) - uneti osnovni html kod u index.html i postaviti naslov: Rad sa podacima (h1)

U fajl podaci.txt uneti nekoliko redova teksta

U fajl osobe.json uneti samo jednu osobu:

 {
    "ime": "Marko",
    "prezime": "Petrović",
    "godine": 25
 }
************************************************

Ispod naslova staviti dugme i paragraf u koji će se uneti učitani tekst:

<button id="btn1"> Učitaj podatke </button>
<p id="p1"></p>

Zatim korak kpo korak raditi skriptu za čitanje podataka koristeći jQuery metodu .get()

<script>
        $(document).ready(function () {
            $("#btn1").click(function(){
                $.get("podaci.txt", function(p){
                    $("#p1").text(p);
                })
            })
        });
    </script>

Napomena: ne zaboravite da u head deo dodate link ka jQuery:

<script src="https://code.jquery.com/jquery-latest.min.js"> </script>

**************************************************************

Da bi se videli prelazi između redova teksta, prepraviti da je tag PRE - za preformatirani text

<pre id="p1"></pre>

*************************************************************************************************

2. deo: Učitavanje pomoću Fetch APi - istog txt fajla:

dodati dugme za učitavanje i paragraf u kji se učitava :

<br>
<button onclick="ucitajPodatke()"> učitaj iste podatke sa Fetch API</button>
<p id="p2"></p>

zatim skriptu:

<script>
    async function ucitajPodatke() {
        let odgovor = await fetch("podaci.txt");  
        let data = await odgovor.text();  
        document.getElementById("p2").innerText = data;
    }
</script>

***************************************

Na kraju, raditi učitavanje iz JSON fajla, Fetch API - ali koristiti samo podatke o jednoj osobi

dodati dugme za učitavanje iz JSON fajla u  paragraf:

<button onclick="ucitajJSON()"> ucitaj podatke JSON</button>
<p id="p3"></p>

i skriptu:

<script>
    async function ucitajJSON() {
        let odgovor = await fetch("osoba.json");
        let p = await odgovor.json();
        document.getElementById("p3").innerText = `Ime: ${p.ime}, Prezime: ${p.prezime}, Godine: ${p.godine}`;
    }

</script>


Last modified: Wednesday, 19 February 2025, 1:48 PM