jQuery AJAX $.get() és $.post()
Lekérdezhetünk vagy küldhetünk adatot, a feldolgozó (php, asp, stb.) fáj felé.
Alkalmazható szintaxisok:
$.get(URL,data,function(data,status,xhr),dataType)
Vagy
$.post(URL,data,function(data,status,xhr),dataType)
Parameterek Leírás URL Kötelező megadni. Itt kell megadni kéréshez, az URL útvonalat. data Választható. Meghatározhatjuk milyen adatokat küldjünk a szerverre, kérés mellé.
function(data,status,xhr) Meghatározott függvény lefuttatása paraméterrel, vagy paraméterekkel, ha a kérés sikeres.
function paraméterek:
data - Kérelemnél, tartalmazza a kapott adatokat.
status - Tájékoztat, a kérelem állapotáról, a következő valamelyik adattal:
"success", Kérés sikeres.
"notmodified", Nincs módosítva.
"error", Hiba.
"timeout", Időtúllépés.
"parsererror" Értelmező hiba.
xhr - Tartalmazza az XMLHttpRequest (kérés, hibalista) objektumot.
dataType - Választható. Meghatározza a szerverről várható adatok típusát.
Alapértelmezésben, jQuery végezhet automatikus találgatást is.
Lehetséges dataType típusok:
"xml" - Egy XML dokumentum.
"html" - HTML egyszerű szövegként.
"text" - Sima szöveg.
"script" - Fut a JavaScript válaszadása , és visszaadja azt az egyszerű szöveget
"json" - Fut a JSON válaszadása , és visszaadja a JavaScript objektumot.
"jsonp" - Betölti a JSON blokkot jsonp. Majd adjunk hozzá egy "?callback=?" Az URL-t adjuk meg, a visszahíváshoz.
callback = visszahív, visszahívás
Teszteléshez, php programnak továbbítunk kéréseket.
Tesztelni szerveren tudjuk, vagy otthoni gépünkre telepített APACHE szerveren.
Teszteljük $.get() és $.post() metódussal.
Leírás.
Megjegyzés:
Visszatérési eredményt megjeleníthetjük, alert ablakban, vagy szelektorral kiválasztott elem, területén.
<script> $(document).ready(function(){ // ---------- 1. Példa $.get() Nem továbbítunk adatokat, nézzük mi történik?. ---------- $("#getkeres01").click(function(){ $.get("mintak/matematika.php", function(data){ alert("Adat: " + data); } ); }); // -------------------------------------------------------------------------------------- // ---------- 2. Példa $.get() Visszadja a kért adatok, feldolgozási eredményét. // --------------------- Siker esetén a statusra = success választ kapjuk, akkor rendben a lekérés. $("#getkeres02").click(function(){ $.get("mintak/matematika.php", { szorzo:10, szorzando:25 }, function(data, status){ alert("Adat: " + data + "\nStatus értéke: " + status); } ); }); // -------------------------------------------------------------------------------------- // ---------- 3. Példa $.post() Visszadja a kért adatok, feldolgozási eredményét. $("#postkeres01").click(function(){ $.post("mintak/matematika.php", { szorzo:100, szorzando:25 }, function(data, status){ alert("Adat: " + data + "\n\nStatus értéke: " + status); } ); }); }); </script> </head> <body> <button id="getkeres01">GET() kérés 1.Példa.<br />Nem továbbítunk adatokat, mi történik?<br /> Kattints ide!</button> <button id="getkeres02">GET() kérés 2.Példa.<br /> Visszadja a feldolgozott adatok eredményét.<br /> Kattints ide!</button> <button id="postkeres01">POST() kérés 3.Példa. <br />Visszadja a feldolgozott adatok eredményét.<br />Kattints ide!</button> </body> |
A fenti $.get() és $.post() meghatározásoknál:
Első meghatározás, az URL cím meghatározása, melyik fájlt hívjuk meg. ( "matematika.php").
Második meghatározás, átküldünk néhány adatot (paramétert) {név:érték, név:érték} formátumban.
A PHP script "matematika.php" beolvassa a paramétereket, feldolgozza azokat, és visszaadja az elküldött paraméterek eredményét.
A harmadik meghatározás, a visszahívási függvény: function(data, status)
Első visszahívási paraméter a data, mely visszaadja a kért adatot.
Második visszahívási paraméter a status, a kérés státuszát adja vissza. ( Ha a status eredménye success, akor a lekérdezés sikeres.)
Gyakorláshoz hozzunk létre egy "mintak" nevű mappát, melybe elhelyezzük feldolgozó php fájlt. A fenti példákhoz, "matematika.php" fájl, tartalma: <?php if(empty($_GET['szorzo'])) {$_GET['szorzo']="";} if(empty($_GET['szorzando'])) {$_GET['szorzando']="";} if(empty($_POST['szorzo'])) {$_POST['szorzo']="";} if(empty($_POST['szorzando'])) {$_POST['szorzando']="";} $ga=$_GET['szorzo']; $gb=$_GET['szorzando']; $pa=$_POST['szorzo']; $pb=$_POST['szorzando']; if($ga =="" && $pa ==""){ echo " \nNincs feldolgozható adat!";} if($ga!="" OR $gb!=""){ echo("\nElküldött get() adatok feldolgozása, a meghívott külső PHP fájlba:\n"); $c=$ga*$gb; echo "\nszorzo=".$ga; echo "\nszorzando=".$gb; echo "\nEredmeny=".$c; } if($pa!="" OR $pb!=""){ echo("\nElküldött post() adatok feldolgozása, a meghívott külső PHP fájlba:\n"); $c=$pa*$pb; echo "\nszorzo=".$pa; echo "\nszorzando=".$pb; echo "\nEredmeny=".$c; } ?> |
|
További megjegyzések:
<script>
$(document).ready(function(){
//-- Kérés "xxx.php" fájlhoz, tömb formátumban továbbítja adatokat a szerverre. Kérés teljesül.
// ------- De, figyelmen kívül hagyja visszatérési eredményeket.
$("#get_color").click(function(){
$.get("xxx.php", {'colors[]':["Orange","Red","Black"]});
});
// -- Kérés "xxx.php" fájlhoz, a kérés mellé küldünk néhány további számtani adatot. Kérés teljesül.
// ------- De, figyelmen kívül hagyja visszatérési eredményeket.
$("#get_adat").click(function(){
$.get("xxx.php",{szorzo:10, szorzando:25});
});
// -- Kérés "xxx.php" fájlhoz, a kérés mellé küldünk néhány további szöveges adatot. Kérés teljesül.
// ------- De, figyelmen kívül hagyja visszatérési eredményeket.
$("#get_adatok").click(function(){
$.get("xxx.php", { name:"Cinege", lakhely:"Budapest" });
});
// ---------------Visszatérési eredmény megtekintése. ---------------------------------------------------------------------------------------
// -- Kérés "xxx.php" fájlhoz. Kérés teljesül.
// ------- Függvény segítségével, visszatérési eredményt megjeleníthetjük, alert ablakban, vagy szelektorral kiválasztott területen.
$("#get_Adat").click(function(){
$.get("xxx.php", function(data) { alert("Adat: " + data); });
});
});
</script>
|