jQuery - Ajax GET i POST zahtjevi

jQuery $.get() i $.post() metode

jQuery metode $.get() i $.post() pružaju jednostavne alate za asinhrono slanje i preuzimanje podataka s web servera. Obe metode su prilično identične, osim jedne velike razlike - metoda $.get() izrađuje Ajax zahtjeve pomoću HTTP GET metode, dok metoda $.post() izrađuje Ajax zahtjeve pomoću HTTP POST metode. Osnovna sintaksa ovih metoda može se napisati kao: 

$.get(URL, data, success);   — ILI —   $.post(URL, data, success);

Parametri u gornjoj sintaksi imaju sljedeće značenje:

  • Potrebni parametar URL-a navodi URL na koji se šalje zahtjev.
  • Izborni parametar podataka specifikuju skup niza upita (tj. parovi ključ/vrijednost (key/value)) koji se šalje web serveru zajedno sa zahtjevom.
  • Izborni parametar uspjeha u osnovi je funkcija povratnog poziva koja se izvršava ako zahtjev uspije. Obično se koristi za dohvatanje vraćenih podataka.

Izvođenje GET zahtjeva sa AJAX-om koristeći jQuery

Sljedeći primjer koristi jQuery metodu $.get() za izradu Ajax zahtjeva za fajl "date-time.php" pomoću HTTP GET metode. Jednostavno dohvata datum i vrijeme vraćeno sa servera i prikazuje ih u pretraživaču bez osvježavanja stranice. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer izrade GET zahtjeva 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(){
        $.get("/examples/php/date-time.php", function(data){
            // Prikaži vraćene podatke u pretraživaču
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <div id="result">
        <h2>Sadržaj DIV okvira rezultata zamijeniće datum i vrijeme poslužitelja</h2>
    </div>
    <button type="button">Učitajte datum i vrijeme</button>
</body>
</html>

Evo naše datoteke "date-time.php" koja jednostavno prikazuje trenutni datum i vrijeme servera.

<?php
// Vrati trenutni datum i vrijeme sa servera
echo date("F d, Y h:i:s A");
?>

Uz zahtev takođe možete poslati neke podatke serveru. U sljedećem primjeru jQuery kod upućuje Ajax zahtjev na "create-table.php", kao i šalje neke dodatne podatke serveru zajedno sa zahtjevom. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer slanja podataka pomoću Ajax GET zahtjeva u jQuery-ju</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        // Dobijanje vrijednost iz ulaznog elementa na stranici
        var numValue = $("#num").val();
        
        // Slanje ulaznih podataka serveru koristeći metodu GET
        $.get("/examples/php/create-table.php", {number: numValue} , function(data){
            // Prikaži vraćene podatke u pretraživaču
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <label>Upišite broj: <input type="text" id="num"></label>
    <button type="button">Prikaži tablicu množenja</button>
    <div id="result"></div>
</body>
</html>

Evo PHP skripte naše datoteke "create-table.php" koja jednostavno izvodi tablicu množenja za broj koji je korisnik unio na klik. 

<?php
$number = htmlspecialchars($_GET["number"]);
if(is_numeric($number) && $number > 0){
    echo "<table>";
    for($i=0; $i<11; $i++){
        echo "<tr>";
            echo "<td>$number x $i</td>";
            echo "<td>=</td>";
            echo "<td>" . $number * $i . "</td>";
        echo "</tr>";
    }
    echo "</table>";
}
?>

Izvođenje POST zahtjeva sa AJAX-om koristeći jQuery

POST zahtjevi identični su GET zahtjevima u jQuery-ju. Trebali biste koristiti $.get() ili $.post() u osnovi zavise o zahtjevima koda na strani poslužitelja. Ako imate veliku količinu podataka za prenos (npr. podatke iz obrazca), morate koristiti POST, jer GET ima strogo ograničenje prenos podataka. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer izrade POST zahtjeva pomoću Ajaxa u jQuery-ju</title>
<style>
    label{
        display: block;
        margin-bottom: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("form").submit(function(event){
        // Zaustavljanje normalnog slanje obrazca
        event.preventDefault();
        
        // Dohvatite (GET) URL akcije
    var actionFile = $(this).attr("action");

        /* Serijalizirajte poslane kontrolne vrijednosti obrazca koje ćete poslati web serveru sa zahtjevom */
        var formValues = $(this).serialize();
        
        // Slanje podataka obrazca putem pošte
        $.post(actionFile, formValues, function(data){
            // Prikazivanje vraćenih podatke u pretraživaču
            $("#result").html(data);
        });
    });
});
</script>
</head>
<body>
    <form action="/examples/php/display-comment.php">
        <label>Ime: <input type="text" name="name"></label>
        <label>Komentar: <textarea cols="50" name="comment"></textarea></label>
        <input type="submit" value="Pošalji">
    </form>
    <div id="result"></div>
</body>
</html>

Evo našeg fajla "display-comment.php" koja jednostavno izbacuje podatke koje je korisnik unio. 

<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Pozdrav, $name. Vaš komentar je uspješno primljen." . "";
echo "Komentar koji ste unijeli: $comment";
?>

Sada kada ste naučili kako izvoditi razne Ajax-ove operacije poput učitavanja podataka, slanja obrazca itd. asinkrono pomoću jQuery-a vrijeme je da završimo ovu lekciju . Prije završetka ove lekcije pogledajte još jedan klasični primjer Ajaxa koji će vam pokazati kako popuniti padajući meni države ili grada na osnovu opcije odabrane u padajućem meniju države pomoću jQuery-a.


Kako popuniti padajući meni države na osnovu opcije odabrane u padajućem meniju države pomoću jQuery-a?


Odgovor: Koristite jQuery ajax() metodu

Popunjavanje padajućeg menija države ili grada na osnovu vrijednosti opcije koju je korisnik odabrao u padajućem meniju zemlje vrlo je česta implementacija Ajax funkcije koju ste vidjeli na mnogim web lokacijama dok ste ispunjavali obrazac za registraciju. To možete lako učiniti putem jQuery ajax() metode uz malu pomoć bilo kog skriptnog jezika na strani servera, poput PHP-a. Pogledajte sljedeći primjer da biste razumjeli kako to funkcioniše: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ispuni padajući meni koristeći jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "process-request.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <label>Država:</label>
                <select class="country">
                    <option>Odaberi</option>
                    <option value="usa">Srbija</option>
                    <option value="india">Bosna i Hercegovina</option>
                    <option value="uk">Hrvatska</option>
                </select>
            </td>
            <td id="response">
                <!--Odgovor će biti ispisan ovdje-->
            </td>
        </tr>
    </table>
</form>
</body> 
</html>

jQuery skripta šalje na server vrijednost opcije odabrane u padajućem meniju države. Datoteka "process-request.php" na serveru zatim obrađuje zahtjev, ako zahtjev uspije, jQuery skripta prima vraćene podatke i kreira padajuću listu grada. PHP kod unutar datoteke "process-request.php" izgledaće otprilike ovako: 

<?php
if(isset($_POST["country"])){
    // Snimite odabranu državu
    $country = $_POST["country"];
     
    // Definisanja niza država i gradova
    $countryArr = array(
                    "usa" => array("Beograd", "Niš", "Novi Sad"),
                    "india" => array("Banja Luka", "Sarajevo", "Bijeljina"),
                    "uk" => array("Zagreb", "Split", "Pula")
                );
     
    // Prikazivanje padajućeg menija na osnovu imena države
    if($country !== 'Select'){
        echo "<label>Grad:</label>";
        echo "<select>";
        foreach($countryArr[$country] as $value){
            echo "<option>". $value . "</option>";
        }
        echo "</select>";
    } 
}
?>

Stvorili smo jednostavnu PHP skriptu za pohranu evidencija zemalja i gradova u demo svrhe. Međutim, u scenariju iz stvarnog svijeta te zapise morate pohraniti u bazu podataka. Molimo pogledajte kurs PHP & MySQL da biste saznali više o umetanju i dohvatanju zapisa iz baze podataka.