Form serializálása és továbbküldése jQuery segítségével


Ez a kis tutorial, rendkívül könnyen megérthető, egyszerűen replikálható, és hihetetlenül hasznos lesz.

A leírásban egy rendkívül egyszerű contact formot fogok használni. A mezők: név, email és telefonszám lesznek. A form adatai úgy jutnak el a szerverhez, hogy ez nem ismeri a hozza jutó adatokat, és ami ennél is fontosabb, a javascript ami küldi az sem ismeri a form tartalmát

Bizonyára már számtalanszor megtörtént, hogy egy formot ajax-szal szerettünk volna elküldeni a szerver oldalnak. Ez szép és jó, de a gond akkor kezdődik, mikor a formunk nagy, akár több, mint 100 eleme van. Ebben az esetben a régi jó megoldás, mikor egyenként vesszük át az értékeket nem elfogadható.

Form serializálása és továbbküldése jQuery segítségével jquery logo1
var elem1 = $('#elem1').val();
var elem1 = $('#elem1').val();
...
var elemn = $('#elemn').val();

De mondhatjuk, hogy ez még a jobbik eset, hisz ebben az esetben tudjuk hogy a formnak egy véges számú eleme van. A rosszabbik eset az, ha a formunk egy generált form. Ebben az esetben a form elemei nem ismertek, csak a generálás végén jönnek létre.

Természetesen léteznek megoldások, melyeket alkalmazhatunk (pl. checkboxok esetén az elemek neve egy tömb lesz), de ezek egyike sem igazán kényelmes.

A következőkben épp az ilyen esetekben alkalmazott egyszerű megoldást szeretném bemutatni a jquery keretrendszer segítségével.
Az egész leírás lényege, hogy a nézetet teljesen elvonatkoztassuk a szerveroldaltól, illetve a javascriptől. Így vegül is teljesen mindegy, hogy hogyan néz ki a formunk, a szerver egy tömböt fog kapni, ezt bejárva értelmezi a kapott adatokat.

1. lépés: Form felépítése

Mint már fentebb is említettem a formunk rendkívül egyszerű lesz.

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="test.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
<form id="frm">
	<label for="nev">Nev:</label>
<input id="nev" name="nev" type="text" />
 
	<label for="email">E-mail:</label>
<input id="email" name="email" type="text" />
 
	<label for="telefonszam">Telefonszam:</label>
<input id="telefonszam" name="telefonszam" type="text" />
 
	<a id="send" href="#">SEND</a></form>
<div id="response" style="display: none;">
	Response:</div>
<div id="status" style="display: none;">
	Status:</div>

A form melett van kettő div elemünk is. Ezekre szükségünk van hisz valahogy a visszatérített választ is szeretnénk látni.

Most hogy meglennénk a formunkkal, lássuk, hogy jön be a képbe a jQuery, azaz a JavaScript.

2. lépés: test.js – form adatainak serializálása és továbbküldése

$(document).ready(function() {
	Editor.initEventHandlers();
});
var Editor = {
     initEventHandlers: function () {
          $("#send").click(function(e){
          Editor.formsubmit();
          return false;
     });
},
     formsubmit: function () {
          var url = "process.php";
          $.post(
               url,
               $('#frm').serialize(),
               Editor.onsubmitcomplete
          );
     },
     onsubmitcomplete : function(data,textStatus){
          $('#response').show();
          $('#status').show();
          $('#response').append(data);
          $('#status').append(textStatus);
    }
}

Talán az egész leírás leglényegesebb részlete a fenti kódrészlet. Láthatjuk, hogy először is inicializáljuk az Editor objektum initEventHandlers metódusát. Ez viszonylag egyszerű dolgot végez. A “send” id link click eseményét felülírja az Editor.formsubmit metódussal.

A formsubmit serializálja a form elemeit és ezt továbbküldi POST-tal a process.php-nak. A szervertől kapott választ az “onsubmitcomplete” metódus dolgozza fel. Első lépésben láthatóvá teszi a “response” es a “status” diveket, majd kitölti őket a szervertől kapott válasszal. Az “onsubmitcomplete” függveny egy callback fügveny mely akkor kerül meghívásra, amikor a szervertől válasz érkezik. Ez egy jQuery függvény, természetesen neve lehet bármi. Három paramétere van, a “data”, “textStatus” es az “XMLHttpRequest”. Mi ebből az első kettőt használjuk. A data a visszatérített válasszöveg lesz. Ez amit effektív válaszol a szerver. A második paraméter a request státusza, ezt a “status” divben tároljuk.

3 lépás: process.php – szerver oldal.

Form serializálása és továbbküldése jQuery segítségével php logo

A szerver oldalon példánkban rendkívül egyszerű dolgot végzünk. Kiíratjuk a $_POST változó tartalmát, hisz mi erre vagyunk kíváncsiak, hogy a jQuery miképpen küldi el a form elemeit.

Nagyjából meg is lennénk. A test.php lefuttatása után ha mindent jól végeztünk a következőt kellene lássuk:

 
Response:
 
array(3) {
  ["nev"]=&gt;
  string(6) "Lorand"
  ["email"]=&gt;
  string(16) "***@gmail.com"
  ["telefonszam"]=&gt;
  string(10) "0742356789"
}
 
Status:success

Remélem sikerült szemléltetnem, hogy a form serializálása milyen egyszerűvé teszi a nagyobb formok feldolgozását, de én mindenképpen kisebb formoknál is tudnám ajánlani. Sokan amiatt sírnak, hogy nem tudják validálni a formjukat. Erre én azt szoktam mondani, hogy egy form elemeinek az eggyenkénti validálása már amúgy is kiment a divatbol, hisz sokszor nem is tudjuk, hogy is néz ki a formunk. Erre is megvannak mara a technikák: Livevalidation, jQuery validation plugin. Mindenkinek tudom őket ajánlani, rendkívül egyszerűen testreszabhatóak, és könnyen implementálhatóak.

Tehát még egyszer a leírás lényege: a nézetet teljesen, vagy legalábbis lehetőleg a legjobban elvonatkoztatni a szerver oldaltol (controller), így a jövőbeni módosításoknál nem kell a js állományunkat is módosítsuk.

Hasznos linkek:

  1. jQuery
  2. jQuery ajax
  3. Live validation
  4. jQuery validation plugin

További jó kódolást.


Szerkesztve: BlackY. Helyesírási hibák és ékezetek javítása, e-mail cím eltávolítása.

Kapcsolódó bejegyzések:
  • Form serializálása és továbbküldése jQuery segítségével

    Létezik egy technika, amivel különböző felbontású eszközökre külön css stílusokat tudunk meghívni. Példa 1200 pixelnél kisebb és nagyobb méretekre:…

  • Form serializálása és továbbküldése jQuery segítségével

    Ez egy rövid ajánló lesz, mivel ma találtam először ezzel a lappal és igencsak megtetszett: http://www.jquery-plugins.huA lap elég sok hasznos jQuery plu …

  • Form serializálása és továbbküldése jQuery segítségével

    Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Form serializálása és továbbküldése jQuery segítségével

    Az előző cikkemben mindenféle galéria scriptet mutattam nektek. A mostani cikkben csak kimondottan lightbox szerű scriptek, pluginok lesznek természetesen jQuery …

  • Form serializálása és továbbküldése jQuery segítségével

    A paraméter átadásnak egyszerű html-ből 3 ismert módja a sütik, a GET és a POST. Mind a 3 megoldásnak megvannak az előnyei és hátrányai. Nézzük sorra.SÜTIK …

A cikket beküldte: Gombos Lorand (http://)

6 hozzászólás

  1. dexter says:

    Hello,
    Nagyon jo tutorial. Kellene tobb ilyen reszletes leiras!

  2. gomby says:

    Lesz meg:)

  3. passatgt says:

    Szerkeszve: BlackY. Helysírási hibák
    irónikus:)

  4. Aspi says:

    Sziasztok.

    Egy gondom lenne,a checkbox state nem checked nem hozza át a serializált tömbbe.

  5. gomby says:

    Szia,
    Hat ez nem nagy gond – hatul megnezed ha letezik, ha nem akkor ewzt jelenti nincs becjekkolva.

  6. gomby says:

    Na hat ezt majdnem helyesen irtam – remelem ertheto azert

Szólj hozzá
a Form serializálása és továbbküldése jQuery segítségével c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>