Codeigniter AJAX és JSON alapok

#codeigniter #php #ajax #json #js #javascript #jquery

Codeigniter AJAX és JSON alapok

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.

Kedvenc PHP framework-ünk használata közben elgondolkodhatunk, hogyan is lenne a legcélszerűbb haladó megoldásokat beleépíteni az alkalmazásunkba. Ebben próbálok segíteni ezzel a kis tutoriálommal.

Példánkhoz hasonló megoldást alkalmaztam Codeigniter nélkül a Foglalt-e a felhasználónév AJAX technika cikkemben.

Lássuk a példát

A feladatunk egyszerű lesz. A regisztrálás során ki kell szűrnünk azokat a felhasználókat, amelyek már be vannak regisztrálva email címükkel a weboldalunkra. Ezt úgy fogjuk megtenni, hogy az űrlap beküldése nélkül jelezzük nekik, hogy már regisztrálva van-e a megadott email címük.

Logika a kód mögött

  1. Először ugyebár egy FORM-ra lesz szükségünk, amiben JS-el megnézzük milyen értéke van egy bizonyos mezőnek.
  2. Majd jQuery használatával elküldjük az adatokat a controller-ünknek ami egy modell function-jével meg is állapítja, hogy van-e ilyen az adatbázisban.
  3. A TRUE vagy FALSE értéket pedig JSON adatként küldjük vissza JS-ünkbe.

A Form és a JS

Formunknál egyetlen követelmény, hogy a vizsgált mezőnek adjunk egy ID-t. Aztán megnézzük a beírt értéket, hogy szabványos email cím-e. Ha igen, akkor küldjük tovább a controller-nek.

$("#email").focusout(function() {

    // focusout()-ot használtam, így akkor zajlik le az ellenörzés, 
    // ha már elkattintott a felhasználó a mezőből
    var checkString_email    = $("#email").val();

    // hozzáadunk egy kis regex filtert
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    var data            = 'email='+ checkString_email;

    // ha a checkString_email érvényes email
    if(filter.test(checkString_email)) {

    // akkor ajax hívás
    $.ajax({
        type: "POST",
        url: "controllerünk_elérési_útja",
        data: data,
        dataType: 'json',
        // ezt csak akkor fontos megadni ha 
        // JSON-ként akarjuk kezelni az adataink
        success: function(result) {
            if(result.email_exists == true) {
                $('#emailExistsFail').hide();
                $('#emailExistsOk').show();
            } else {
                $('#emailExistsOk').hide();
                $('#emailExistsFail').show();
            }
        }
    });

    // a következő else-vel biztosra megyünk, 
    // hogy csak az igazi adatokra helyesel       
    } else {
        $('#emailExistsOk').hide();
        $('#emailExistsFail').show();
    }
    return false;
});

Én gyakran használok két divet, amiket elrejtek és megjelenítek az eredménytől függően. De persze bármilyen más stílusmódosítást végrehajthatunk jQuery segítségével.

A Controller

Érdemes külön controllert létrehozni az AJAX műveleteink számára, így egy helyen tudhatjuk ezeket. És az ebben lévő function-ünk kb így néz majd ki:

function email_availability() {

    $this->load->model("membership_model");

    // meghívjuk a modellünk, és a benne lévő eszköz segítségével
    // megnézzük van-e ilyen ilyen email cím az adatbázisunkban
    $query = $this->membership_model->email_exists( $this->input->post("email") );

    if ($query['exists'] == TRUE){

        // ha igen akkor egy igaz értéket küldünk vissza,
        // de a tömbünket a json_encode() segítségével előkezeljük
        echo json_encode(array('email_exists' => FALSE));

    } else {
        echo json_encode(array('email_exists' => TRUE));
    }
}

A Modell

A modellünkben pedig egy kis rövid eszközzel ellenőrizzük, hogy van-e ilyen email az adatbázisban.

function email_exists($email) {

    $this->db->where('email', $email);
    $query = $this->db->get('user');

    // a biztonság kedvéért mindig a CI rendszerén
    // keresztül érjük el az adatbázisunk
    if($query->num_rows > 0) {

        // ha több mint 0 sor lett a lekérdezésünk eredménye,
        // akkor van már ilyen email cím az adatbázisban
        // ezért visszaküldünk egy igaz értéket
        $data['exists'] = TRUE;
        return $data;

    } else {
        $data['exists'] = FALSE;
        return $data;
    }
}

Debugging

Ha elrontottunk valamit, akkor se essünk kétségbe. Például Chrome-ban a Ctrl+Shift+i billentyűkombinációval előhívott fejlesztői eszközöknél keressük meg a Network fület. Itt nyomon tudjuk követni a szerver felé irányuló AJAX lekérdezéseket.

A JSON adatokkal egyrészt könnyű dolgozni, mert jól integrálhatóak a JS kódjainkba, másrészt pedig többdimenziós asszociatív tömbökhöz vagy akár az objektumokhoz hasonlóan, szépen strukturált adatszerkezeteket lehet létrehozni viszonylag kis adatmérettel.

További tartalmak