Ajax prihlasovanie

Prihlasovanie pomocou AJAX ma veľku výhodu. Predstavte si, že máte diskusiu a užívatelia sa prihlasujú pod svojim menom ale môžu reagovať aj bez prihlásenia, uživateľ má rozpísaný príspevok, bohužiaľ sa ale zabudol prihlásiť. Pri klasickom prihláseni sa stránka znovu načíta a užívateľ stratí obsah rozpísaného príspevku, rozhodne nebude veľmi rád. Naproti tomu ale AJAX prihlásenie pošle požidavku na server ohľadom prihlásenia bez refreshu stránky. Užívateľ sa teda prihlási a príspevok, ktorý má rozpísaný mu ostane a môže písať ďalej.

Teraz si ukážeme ako jednoducho vytvoriť AJAX prihlasovanie. Najskôr je nutné si vytvoriť klasický HTML prihlasovací formulár:

<form method="post" id="prihlasenie"> meno: <input type="text" name="meno" /><br /> heslo: <input type="password" name="heslo" /><br /> <input type="submit" name="odoslat" value="prihlasit" /> </form> <div id="status">Neprihlaseny</div>

Formulár nemá vlastnosť action, takže sa presmeruje na tú istú stránku na akej sa nachádza, povedzme, že prihlasenie.php. Poďme si teraz ukázať PHP kód prihlásenia:

<?php if(isset($_POST['meno']) && isset($_POST['heslo'])) { $meno = "admin"; $heslo = "lietadlo"; if($_POST['meno'] == $meno && $_POST['heslo'] == $heslo) { echo '<span>prihlaseny</span>'; } else { echo '<span>nespravne meno/heslo</span>'; } } ?>

Pre jednoduchost nieje prihlasovanie naviazane na DB, priklad k tomu ani nesluzi. Vsimnite si, ze zatial je vsetko klasicke, mozno spoznavate casti kodu. Podme teraz prejst na jQuery cast kodu, ktora nam spravi samotne AJAX prihlasenie, o ktorom tento navod vlastne je.

<script> $(document).ready(function() { $('#prihlasenie input[name=odoslat]').click(function() { var meno = $('#prihlasenie input[name=meno]').val(); var heslo = $('#prihlasenie input[name=heslo]').val(); $('#status').load('/ukazky/2.php span', { 'meno': meno, 'heslo': heslo } ); return false; }); }); </script>

Ako vidíte, JavasSript je pekne oddelený od samotného kódu, takže v prípade, že užívateľ nemá povolený JavaScript, pôjde mu klasické prihlasovanie. JavaScript kód po stlačení na tlačidlo prihlásiť vráti buď správu o tom, že je uzivateľ prihlásený alebo, že je nesprávne meno/heslo.

Tagy: ajax prihlasovanie