Traitement des demandes de courrier Ajax avec Symfony

Traitement des demandes de courrier Ajax avec Symfony
Categories
Technologies
Author

Miro Lehtonen

Project Manager & Lead Developer
Date

La gestion des formulaires PHP et l’accès aux données qui succèdent aux données saisies par l’utilisateur sont le cœur de l’apprentissage de PHP. Symfonyajoute une architecture Model-View-Controller (MVC) avec des composants réutilisables, une structure bien organisée et les meilleures méthodes pour le processus de développement, en faisant un environnement typique pour traiter les saisies utilisateur. Ajax, la technologie qui permet le contenu dynamique des pages Web, permet aux utilisateurs d’effectuer des actions sur la page sans transitions de page ou rechargements en traitant les données en arrière-plan, en envoyant des requêtes au serveur et en mettant à jour la vue de la page en fonction des retours de page. Aussi connu sous le nom de Javascript asynchrone, la fonctionnalité Ajax est souvent utilisée à la place des formulaires PHP pour envoyer les données d’entrée des utilisateurs au serveur.

Challenge: Adding items to shopping cart

Supposons que nous voulions ajouter des articles au panier d’achat. Suite à la saisie de l’utilisateur, nous avons un ensemble d’éléments comportant des idet une valeur. Les paires (id, valeur) sont les données que nous envoyons de manière asynchrone au serveur. Notre choix de technologie est une bibliothèque Javascript couramment utilisée appelée axios qui est fourni avec une interface permettant d’envoyer des requêtes à une URL déterminée avec les données du corps de la requête. La raison de ce choix est qu’il est facile à intégrer dans un environnement VueJSou ReactJS.

L’appel de fonction

axios.post(url, payload)
envoie une requête HTTP POST asynchrone à l’URL avec les données stockées dans la variable.

Le contrôleur Symfony qui gère la route s’appelle addItems.

use SymfonyComponentHttpFoundationRequest;
public function addItems (Request $request) {

    // process data here, for example:
    $quantity = $request->request->get('quantity');

}

Normalement, lors du traitement des données d’un formulaire PHP, les valeurs des champs du formulaire sont accessibles via la variable $_POST qui est mappée à $request-tt, >request. Lorsque nous publions un formulaire HTML, les données sont accessibles comme prévu, mais maintenant que nous faisons une requête Ajax avec axios, $request-tt, >request est vide. Nos données ont-elles disparu ? Pourquoi ? Comparons les soumissions de formulaires HTML et les requêtes axios ajax.

Cause : différence selon le type de contenu

L’envoi d’un formulaire HTML envoie par défaut la donnée sous la forme d’une url-encodée. Les types de contenu sont indiqués dans l’un des Headers de la requête.

Content-Type: application/x-www-form-urlencoded

Axios.post sérialise la donnée dans une chaîne JSON par défaut qui apparaît également dans le type de contenu header.

Content-Type: application/json;

Parce que le format JSON permet le stockage de données avec une profondeur de stockage arbitraire, il ne peut pas être mappé en toute sécurité à la structure PHP du sac Parameter Bag de $request->request. Nous devons donc ajuster notre code pour travailler avec les requêtes axios.post.

Le code qui résout ce problème.

Solution #1

Envoyez les données utiles sous forme de chaîne JSON et modifiez le code PHP. L’accès au corps de la requête dans le contrôleur se fait via getContent(). Ces données JSON brutes doivent être décodées dans un objet PHP qui permet d’accéder aux valeurs des champs comme des propriétés.

$postData = json_decode($request->getContent());
$quantity = $postData->quantity;

Solution #2

Envoyer la donnée utile sous la forme d’une chaîne codée en url en modifiant le code Javascript. Nous créons un objet URLSearchParams pour la donnée utile car axios ne la convertit pas automatiquement en chaîne JSON. Dans un navigateur, nous pouvons également utiliser l’interface FormData au lieu de URLSearchParams.

const params = new URLSearchParams();
params.append('id',1234567890);
params.append('quantity',4);

Comptabilisez ensuite les données. Par exemple :

const submitData = () => {
  try {
    return axios.post(url,params);
  } catch (error) {
    console.log(error);
  }
}
response = submitData()
  .then(({data}) => {
    console.log(data);
  });

Dans ce cas, les données données pour les enregistrement sont normalement accessibles dans le contrôleur, par exemple :

$quantity = $request->request->get('quantity');

Autres solutions

Chaque fois que la première idée nous semble trop difficile ou trop longue à mettre en œuvre, nous sommes enclins à chercher une solution alternative. Que pensez-vous d’envoyer une requête HTTP GET à la place ? Le regroupement des paramètres dans l’URL se déroule bien, non ? C’est facile, ça marche, alors pourquoi ne pas utiliser axios.get ? Eh bien, il y a une raison pour ne pas le faire.

Quelque chose de facile ou de rapide à mettre en œuvre n’est pas pertinent lorsque nous choisissons entre HTTP post et recevoir des requêtes. Au contraire, nous devrions nous demander si nous pouvons répéter l’action sans conséquences, une caractéristique également connue sous le nom d’idempotence. Par exemple, l’ajout d’articles au panier d’achat devrait toujours entraîner des mises à jour des données sur le serveur. A chaque répétition, vous devez ajouter d’autres articles au panier. Et si nous implémentons ceci avec une requête « get » ? La première fois fonctionne probablement très bien, mais la deuxième fois – nous pouvons obtenir un message de réponse « items ajoutés avec succès » mis en cache par le navigateur sans qu’aucune requête n’atteigne le serveur. En plus d’être une conséquence clairement indésirable, cela explique aussi pourquoi une requête get ne peut pas remplacer une requête post. Si nous avons vraiment besoin d’une solution alternative, nous pouvons utiliser une autre bibliothèque Javascript pour le traitement HTTP. Par exemple, Linux est livré avec un support complet pour Ajax.

')}

Miro Lehtonen · Project Manager & Lead Developer

Academic scholar with a research focus on information retrieval and web technology, educational and team leader experience at several institutions in Finland, Thailand, and Australia. Currently also an adjunct lecturer at Mae Fah Luang University, Thailand. Miro has been applying his academic expertise in a number of different projects as the IT Architect of web portals.

Add comment

Related blog articles