info2gestion

Cette page reprend la page précédente Formulaire web avec AJAX et JQuery.

L'exemple ci-dessous montre un calcul avec plusieurs valeurs envoyées à un script php de manière asynchrone avec ajax et le résultat est retourné au navigateur client sous forme d'une seule valeur texte.

JQuery est une bibliothèque javascript de fonctions et méthodes qui peut assurer une compatibilité entre différents navigateurs web, simplifier et diminuer le nombre de lignes.

La librairie JQuery peut être chargée dans une page web avec un lien cdn ou en local dans l'entête de la page web entre les balises <head> et </head>. Des options de sécurité pour les liens externe peuvent s'appliquer.

en lien externe (cdn)

  
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-kmHvs0B+OpCW5GV..."
crossorigin="anonymous"></script>

en lien local (pour avoir la clé sha256, il faut télécharger le fichier depuis le site officiel jquery ou utiliser une application de cryptage)

  
<script src="vers/dossier/jquery-3.7.1.min.js"</script>

Pour tester que Jquery est bien chargé, on peut utiliser ce script. C'est une vérification d'ensemble, l'accès aux fonctions ajax de jquery ne passe pas dans la condition.

  
<script>
if (window.jQuery) {  
 alert("JQuery fonctionne");
} else {
 alert("Le lien JQuery ne fonctionne pas");
}
</script>

Il faut s'assurer de ne pas télécharger la version slim qui ne contient pas les fonctions ajax.

Le script JAVASCRIPT-AJAX (PHP POST avec JQUERY) utilisé pour cet exemple

Pour un résultat similaire avec l'api JQUERY, d'autres scripts peuvent s'appliquer de différentes manières (procédurales, fonctions, classes...).


<script>
function formAjax_JQuery_v01() {

// lecture de la saisie du formulaire
var nb1 = document.getElementById("nbSaisie1").value;
var nb2= document.getElementById("nbSaisie2").value;
var in3z = document.getElementById("AfficheResultat")

// pour le séparateur décimal anglais -> francais
nb1 = nb1.replace(/,/g, '.');
nb2 = nb2.replace(/,/g, '.');

// validation de la saisie pour ne pas
// créer un échange de données vide

boo = true;
// une des saisies n'est pas un nombre
if (isNaN(nb1) || isNaN(nb2)) {
  boo = false;
}

// si ce sont des nombres, vérification des bornes
if ((Number(nb1) < 0) || (Number(nb1) > 50)){
  boo = false;
 } else if ((Number(nb2) < 0) || (Number(nb2) > 50)){
  boo = false;
}

// saisie valide
// boo est vrai
// on continue
if (boo){
  var e = document.getElementById("liste_deroul");
  var oper = e.options[e.selectedIndex].value;

  /* ------------- */
  /* AJAX - JQUERY */
  /* ------------- */

  const php_url = "fichier_liaison.php";

  $.ajax({
    type: "POST", // 1
    url:php_url,
    dataType: "text", // 2
    // donnees formulaire
    data:{
        nb1: nb1,
        nb2: nb2,
        oper:oper
      },
    // réponse php résultat
    success:function(data) {
      in3z.value = data;
    },

    error: function (error) {
      console.log(`Error ${error}`);
      }
    }); // $.ajax

  } // fx formAjax_JQuery_v01()
} // if boo
</script>

-1- POST ou GET la méthode d'envoi peut être modifiée avec la propriété type

-2- la propriété TEXTE implique le retour d'une chaîne de caractère brut du serveur avec le fichier php.
Pour recevoir un tableau de données (plusieurs données), il faut utiliser la propriété JSON
et un tableau associatif (par php ou javascript).
Pour cet exemple, la donnée retournée est le résultat du calcul au format texte.

L'utilisation de la librairie JQuery-Ajax simplifie le script et diminue le nombre de lignes.

Le script PHP avec POST utilisé pour cet exemple

(script identique à celui de la page formulaire web sans jquery...)

fichier_liaison.php


<?php

// réception POST des données saisies
$nb_1 = htmlspecialchars($_POST['nb1']);
$nb_2 = htmlspecialchars($_POST['nb2']);
$nb_oper = htmlspecialchars($_POST['oper']);

// étape de gestion des incohérences ou erreurs
// de saisie nécessaire mais pas mentionnée

// utilisation de php pour renvoyer le résultat du calcul demandé
if ($nb_oper === "add") {
 $nb_res_1 = $nb_1 + $nb_2;
} else if ($nb_oper === "subst") {
 $nb_res_1 = ($nb_1 - $nb_2) > 0 ?
             $nb_1 - $nb_2 : $nb_2 - $nb_1;
}

// envoi de la réponse au script ajax
echo $nb_res_1;

?>

La librairie JQuery simplifie l'envoi de données avec la méthode GET ou POST.

La majorité des navigateurs web contiennent des fonctionnalités (API) qui permettent d'utiliser javascript nativement comme par exemple l'API fetch.

Les sites web développés récemment ou en-cours de développement peuvent majoritairement utiliser l'API fetch.

JQuery pour AJAX reste une librairie qui est utilisée sur de nombreux sites web.