Webstack
Bejelentkezés

Elfelejtetted a jelszavad?

Nem vagy még tag? Kattints ide és regisztrálj most!

JQuery Ajax Form küldés és szerializálás

JavaScript | tomizej  | 2012-10-10 01:55:35

A folyamat menete

A folyamat először kliens oldali interakciókkal váltható ki (form submit gomb, image, vagy button elemmel), a form submit eseményére. A kliens oldali validálásra ebben az esetben nem fektetünk komolyabb hangsúlyt, bár vitatott téma a kliens + szerver oldali validálás együttes megléte.
Legjobb megoldás, ha a validálást a szerver oldalra bízzuk, azonban az eredményeket visszakommunikáljuk a kliens felé és csak akkor engedjük tovább a folyamatot, ha az adatok validak a szerver szerint.
Ennek a megoldásnak az előnye, hogy nem kell kliens oldalon validátorokat írnunk, nem kell duplikálnunk a folyamatot és nem jelent problémát a közös szabályok implementálása kliens és szerver oldalra egyaránt.
Hátránya viszont, hogy így minden helytelen kérelemmel a szervert bombázzuk, biztonsági szempontból komolyabban meg kell írnunk a szerver oldali védelmet. A döntés igazából attól függ mire fogjuk használni, mennyire érzékenyek az adatok, milyen terhelésű a site, valamint mennyi időnk van a fejlesztésre.

ajax kérés folyamata

1. lépés felépítjük a HTML kódot

Elsőkörben létre kell hoznunk egy formot.

<form method="post" id="regform">
  <label for="name_ajax">Felhasználónév:</label><br />
  <input id="name" type="text" name="name" /><br /><br />

  <label for="email">E-mail:</label><br />
  <input id="email" type="text" name="email"  /><br /><br />

  <label for="tel">Telefonszám:</label><br />
  <input id="tel" type="text" name="tel"  /><br /><br />
  <input type="submit" id="submit" value="Regisztráció" />
</form>
<div id="err_message"></div>
<div id="success_message"></div>

Mint láthatjuk, a mezőneveknek nem adtunk meg id-t, mivel a form elemeit egyetlen datastringbe fogjuk elküldeni a szerver oldal felé.

2. Javascript

Szükségünk lesz a jquery keretrendszerre:

<script src="js/jquery.js" type="text/javascript"></script>

Az alábbi scripttel feldolgozzuk a form mezőit és küldünk egy aszinkron kérést a szerver felé.

$(function() {
					
				$("#regform").submit(function(e){
					e.preventDefault();
					
					var errDiv = $("#err_message");
					var successDiv = $("#success_message");
					
					errDiv.hide();
					successDiv.hide();

					dataString = $(this).serialize();
					//alert(dataString);
    
					$.ajax({
						type: "POST",
						url: "process.php",
						data: dataString,
						dataType: "json",
						success: function(response) {
        
							if(response.status == "ERR"){
								//Hiba van
								errDiv.html(response.err).fadeIn("slow");
							} 
							else {
								//Oké
								successDiv.html("Köszönjünk! Sikeresen regisztráltál!").fadeIn("slow");
							}
         
						}
          
					});
					
        
				});
			});

Részletezzük mi is történik a fenti kódban:

Alapértelmezett submit böngésző-reakció letiltása

e.preventDefault();

Ezzel a paranccsal "megállítjuk" az alapértelmezett eseményt. Gyakorlatilag a háttérben az történik, hogy az adott esemény alapértelmezett művelete nem lesz kiváltva (nem indul el). Tehát jelen példában a submit gombra kattintással nem fogja elküldeni a böngészőt. Így lefuttathatunk más műveleteket.

Form szerializálás

$("#regform").submit(function(e){
	e.preventDefault();

	dataString = $(this).serialize();
});

Miért és honnan jön a this?
A válasz rá a javascript anonymus callback függvények (clousure). A clousure-ökben a this referencia az aktuális DOM objektumra hivatkozik, nem keverendő ez a jQuery objektummal! A $(this) pedig jQuery objektumot készít a DOM objektumból, hogy meg tudjuk rá hívni a .serialize() metódust. Ez a módszer optimálisabb, mintha a jQuery konstruktorában ismét megadtuk volna a form elem ID-jét, mivel úgy a teljes DOM-ból kellett volna kikeresnie az elemet.

A .serialize() metúdus egy url encode-olt stringet készít, az adott jQuery objektum elemeiből, amely form elemeket tartalmaz. Jelen esetben a form objektum elemeiből, a következő datastring állhat elő (ha minden mező ki lett töltve): name=Teszt+n%C3%A9v&email=teszt%40teszt.hu&tel=111-1212

AJAX kérés indítása a szerver felé

AJAX kérések küldésére legalább 5 féle módszer létezik jQuery környezetben. Ezeket egy másik cikkben részletesebben kifejtjük. Most a legáltalánosabb módszert mutatjuk be.

$.ajax({
	type: "POST",
	url: "process.php",
	data: dataString,
	dataType: "json",
	success: function(response) {
		//siker
	}
});

A $.ajax() metódus aszinkron HTTP kérést indít a szerver felé (AJAX). paraméterben egy Settings objektumot vár, amelyben rengeteg beállítás adható meg, melyek opcionálisak. A legáltalánosabbakat használjuk most.

  • type: HTTP kérés típusa: get vagy post
  • url: feldolgozó oldal elérési útja (relatívan az aktuális urlhez, vagy abszolút), ahova a kérést küldjük
  • data: paraméterek, amiket küldeni szeretnénk a feldolgozónak (lehet string, object, tömb... A string kivételével minden típus GET kérés karaktersorozattá lesz konvertálva: nev=teszt&email=teszt@teszt.hu)
  • dataType: Adattípus, amilyen formában várjuk a választ a szervertől. (xml, json, script, vagy html)
  • success function: Egy függvény, ami sikeres kérés végén hívódik meg. success(data, textStatus, jqXHR). 3 paraméteres. Az első data a szervertől visszakapott válasz átkonvertálva a dataType-ban megadott formátumra. A 2. textStatus egy státusz info stringben. A jqXHR pedig az XMLHttpRequest objektum.

Feldolgozzuk a választ:

$.ajax({
	type: "POST",
	url: "process.php",
	data: dataString,
	dataType: "json",
	success: function(response) {
		if(response.status == "ERR"){
			//Hiba van
			errDiv.html(response.err).fadeIn("slow");
		} 
		else {
			//Oké
			successDiv.html("Köszönjünk! Sikeresen regisztráltál!").fadeIn("slow");
		}
	}
});

A success-ben megadott függvény akkor fut le, ha sikeres volt a kérelem, ebben a függvényben kell feldolgoznunk a szervertől visszakapott választ. Jelen példában JSON formában kapjuk. A JSON választ a jQuery dekódolja és JavaScript objektummá alakítja, így továbbiakban nekünk már csak az objektum mezőivel kell dolgoznunk.
Mint a példában láthatjuk, ha az "err" mezőnek van értéke, ez azt jelenti, hogy a szerver oldal elvetette a feldolgozást, validálást és visszaküldte a hibát. A hibaüzenettel már azt csinálunk, amit akarunk, megjelenítése már design és tervezésbeli kérdés.
Ha viszont nincs értéke az "err" mezőnek, így a feldolgozás sikeres volt, megjeleníthetünk egy sikeres üzenetet a kliensen.

Feldolgozás szerver oldalon

A feldolgozást ugyanúgy végezzük, mintha hagyományos form-post történt volna, azonban ügyelni kell, hogy a kimenet valid JSON formátum legyen, ha a hívó kliens oldali script ilyen formátumot vár!

<?php

//Email
if (!$_POST["email"]) {
	$err["email"] = "Nem adtad meg az email címed!";
} elseif (!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
	$err["email"] = "Hibás email cím";
}

//Név: csak betűk és számok
if (preg_match('/^[\pL\pN]++$/uD', $_POST["name"])) {
	$err["name"] = "A név csak számokat és betűket tartalmazhat!";
}

//Telefonszám (max 11 számjegy)
if (strlen(preg_replace('/\D+/', '', $_POST["tel"])) !== 11) {
	$err["tel"] = "Hibás telefonszám!";
}

//Ha nincs hiba, tárolhatjuk 
if (!count($err)) {
	//Tárolás adatbázisban...
}

//JSON kimenet generálás
echo json_encode(
		array(
			"status" => count($err) ? "ERR" : "OK",
			"err" => @implode("<br />", $err)
		)
);
?>

A fenti kódban validáljuk a post tömböt, és JSON kimenetet generálunk a json_encode(array) függvénnyel. Ez a függvény egy tömbből valid JSON formátumot generál. Ezt a választ fogja megkapni a success-ben megírt függvény.
A status mezőben egy státusz stringet definiálunk. Ha a $err tömbben van elem (tehát valamely mező hibába futott), akkor ERR státuszt állítunk be, ha nincs akkor OK -ot. Kliens oldalon így ennek a státusznak az ellenőrzésével el tudjuk dönteni, hogy mi történt a feldolgozásnál. Az err mezőben pedig a hibaüzeneteket küldjük vissza egy közös stringben <br /> -ekkel elválasztva.

 

Szerző: tomizej

címkék
Címkék: tutorial, jQuey, php,

Hozzászólások

Zsolt
2016-09-12 04:12:39

Üdv, nálam minden rendben van, kivéve ar 'ERR' statuszt, valamiért nem írja ki a hibát. Tudna segíteni?

Hozzászóláshoz be kell jelentkezni!

Keress minket Facebookon
Ajánlások