Le traitement des appels AJAX avec CodeIgniter est très simple car le framework intègre quelques subtilités importantes à connaître. Nous allons imaginer un cas concret pour mieux comprendre son fonctionnement.

Savoir si un appel est réalisé en AJAX

Au sein du contrôleur, il existe une méthode très simple permettant de savoir si l'appel est réalisé en AJAX ou non. Elle appartient à la librairie input (chargé automatiquement).

$this->input->is_ajax_request()

Méthode pour savoir si la requête est appelée via AJAX

Cette méthode, utilisable dans un contrôleur, permet de savoir si la requête est un appel AJAX ou non. Elle retournera true si c'est le cas, sinon false. En réalité, cette méthode vérifie que le paramètre HTTP_X_REQUESTED_WITH est bien passé dans le header de l'appel. Plus d'info directement sur la doc.

A noter que la librairie input est toujours automatiquement chargée, pas besoin de la faire manuellement.

Fonctionnement

Imaginons que vous voulez valider un formulaire en AJAX. Nous allons écrire classiquement notre formulaire en HTML, faire notre appel en JavaScript (ici à l'aide de jQuery) vers l'attribut action du formulaire. Notre contrôleur sera appelé, si c'est une requête AJAX, on fait le traitement du formulaire, sinon on affiche notre page.

Formulaire HTML (côté client)

Nous souhaitons faire un système de connexion à un espace personnel en AJAX. Ce formulaire est affiché via la méthode login du contrôleur user.

<form action="<?php echo current_url(); ?>" method="POST">
    <label>Login</label>
    <input type="text" name="login">

    <label>Password</label>
    <input type="password" name="password">

    <button type="submit">Connexion</button>
</form>

Formulaire de connexion HTML classique

Notre formulaire HTML est très classique, rien de compliqué. La fonction current_url est disponible dans url_helper et retourne simplement l'url courante.

Réaliser l'appel AJAX (côté client)

Pour réaliser l'appel AJAX, nous allons utiliser jQuery.

$('form').submit(function(e) {
    e.preventDefault();
    var form = $(this);
    $.post(form.attr('action'), form.serialize(), function(data) {

        // Faire quelque chose ici...

    }, 'json');
});

Appel AJAX lors de la validation du formulaire

Lors de la validation du formulaire, nous réalisons l'appel AJAX. Plusieurs choses à comprendre :

e.preventDefault() permet de spécifier que nous souhaitons empêcher le fonctionnement naturel de l'événement (ici la validation du formulaire). Ainsi, l'utilisation ne sera pas redirigé comme il devrait l'être normalement.

$.post() est une fonction jQuery permettant de faire un appel AJAX en POST. Ici, 4 paramètres sont utilisées :

  • Le premier paramètre correspond à l'url. Dans notre cas, nous prenons l'attribut action de notre formulaire.
  • Le second correspond aux paramètres qui vont être envoyé en POST. La fonction serialize() permet de transformer tous les champs d'un formulaire un objet.
  • Le troisième paramètre est une fonction qui sera le retour de votre requête. Le contenu data correspondra au retour de votre appel.
  • Enfin, le dernier paramètre spécifie que le retour sera au format json.

Traitement du formulaire (côté serveur)

Pour traiter nos données, nous allons vérifier si l'appel actuel est réalisé via AJAX. Si c'est le cas, cela signifie que nous souhaitons faire le traitement des données envoyées, sinon on affiche la page du formulaire de connexion.

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class User extends CI_Controller {

    // Page de connexion
    public function login() {

        // C'est une requête AJAX : traitement du formulaire
        if ($this->input->is_ajax_request()) {
            $data = array();

            // Traitement des données

            echo json_encode($data); // On retourne le résultat au format JSON
        }

        // Sinon, on affiche le formulaire
        else {
            $this->load->view('login');
        }
    }

}

Contrôleur User : la méthode login traite ou affiche le formulaire

Ce code me semble assez clair. Pour le traitement des données, il sera possible d'utiliser la librairie form_validation tout à faire normalement. De la même façon, nous pourrons récupérer les données via $this->input->post().

Références

CodeIgniter

jQuery