Foglalt-e a felhasználónév AJAX technika

#js #javascript #ajax #jquery #php

Foglalt-e a felhasználónév AJAX technika

Figyelem!

Úgy tűnik, hogy jelenleg egy olyan cikket böngészel ami több mint két éve készült. A technológia világában ez nagyon sok idő és azóta már sokkal jobb megoldások is lehetnek, mint amit ebben a cikkben olvashatsz. Így azt tanácsolom keress egy frissebb cikket ebben a témában.

Talán az egyik leghasznosabb kényelmi funkció új felhasználó létrehozásánál, hogy a felhasználók már a regisztrációs űrlap beküldése előtt láthatják, hogy foglalt-e a felhasználónév amivel regisztrálni szeretnének az oldalunkra. Ezt egy kis PHP és jQuery segítségével viszonylag egyszerűen meg is tudjuk csinálni.

Az alapok

A példa kedvéért legyen egy user táblánk az adatbázisban, amit a következő SQL kóddal létre is hozhatnánk.

CREATE TABLE IF NOT EXISTS `user` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(255) NOT NULL,
    `username` varchar(150) NOT NULL,
    `email` varchar(100) NOT NULL,
    `pass` varchar(100)  NOT NULL,
    PRIMARY KEY (`id`)
)

Lássunk a példánkhoz egy űrlapot is, ami ebben az esetben a belépésért felelhetne. A felhasználónév mezője mellett hozzunk létre egy “Foglalt-e?” gombot.

<form action="foglalt-e.php" method="post">
    <input id="username-nev" class="foglalt-e" name="username" type="text" />
    <input id="submit" type="submit" value="Foglalt-e?" />
</form>

És hozzunk létre egy div-et mondjuk az “eredmeny” id-val, ami kiírja majd nekünk, hogy foglalt-e a felhasználónév.

A jQuery

$(function() {
$("#submit").click(function() {
    // mit is írt be a felhasználó a kívánt névhez
    var checkString    = $("#username_nev").val();
    // formázzuk a lekérdezésünk kritériumát
    var data            = 'user='+ checkString;
    // ha a checkString nem üres
    if(checkString) {
        // ajax hívás
        $.ajax({
            type: "POST",
            url: "foglalt-e.php",
            data: data,
            beforeSend: function(html) { // ez történik a hívás előtt
                $("#eredmeny").html('');
            },
            success: function(html){ // ez pedig utána
                $("#eredmeny").show();
                $("#eredmeny").append(html);
            }
        });
}
return false;
});
});

A PHP fájl

A jQuery kóddal végül is csak meghívtuk a PHP fájlt, ami ellenőrzi nekünk, hogy foglalt-e a felhasználónév és visszaadja az eredményt.

<?php

// ha valami van a $_POST-ban
if (isset($_POST['user'])) {

    // itt általában először az adatbázis kapcsolatot include-oljuk
    include('db.php');
    $db = new db();

    // ne bízzunk abban amit a felhasználók beírnak! 
    $username = mysql_real_escape_string($_POST['user']);

    // készítsük el az adatbázis lekérdezésünk
    $sql = "SELECT count(*) as num FROM users WHERE username = " . $username;

    // nézzük meg az eredményét
    $row = $db->select_single($sql);

    if($row['num'] == 0) {
        echo 'A <em>'.$username.'</em> felhasználónév még szabad!';
    } else {
        echo 'A <em>'.$username.'</em> felhasználónév már foglalt!';
    }
}

?>

A lekérdezésünk megnézi mennyi sor van az adatbázisban ahol a felhasználó neve egyezik a megadott névvel. Ha egy sem, akkor a felhasználónév szabad.

További tartalmak