Exemple HTML (en supposant que le bouton se trouve dans un formulaire)?:

Modifiez la partie de la fonction addGuestName qui crée le bouton?:

 fonction addGuestName(obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  const addPaxNameButton = itemClicked.nextElementSibling; // Supposons qu'il s'agisse d'un bouton AJOUTER existant addPaxNameButton.style.display = 'inline-block';
  // Assurez-vous que le bouton créé ici ou un bouton existant a type="button"
  // S'il est créé dynamiquement, vous pouvez le définir ici // addPaxNameButton.setAttribute('type', 'button'); // Si vous devez modifier le bouton existant, tapez var addPaxNameField = document.createElement('input');
  addPaxNameField.setAttribute('type', 'text');
  addPaxNameField.setAttribute('nom', 'visitorNameSurname[]');
  addPaxNameField.setAttribute('placeholder', 'Entrez le nom et le prénom');
  itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling);
  addPaxNameField.setAttribute("obligatoire", "obligatoire");

  // Ecoute l'événement click du bouton ADD addPaxNameButton.addEventListener('click', () => {
    const nom = addPaxNameField.value?;
    updateGuestName(paxid, nom);
    // Ici, vous pouvez envisager de supprimer la zone de saisie ou de désactiver le bouton permettant de fournir des commentaires à l'utilisateur});
}

2. Actualisez la page actuelle une fois la demande de récupération réussie.

Après avoir empêché les sauts de page, nous devons actualiser la page actuelle pour afficher les dernières données une fois la demande de récupération terminée avec succès et les données mises à jour. Ceci peut être réalisé grace à la méthode location.reload().

La méthode location.reload() rechargera le document actuel. Il possède un paramètre booléen facultatif qui, s'il est défini sur true, oblige le navigateur à recharger la page depuis le serveur au lieu de la charger depuis le cache. Normalement, aucun paramètre ou valeur false ne suffira.

Intégrez location.reload() dans votre fonction asynchrone?:

 fonction asynchrone updateGuestName (paxid, nom) {
  const paxIDbody = JSON.stringify({ pxid : paxid, nom : nom }); // Méthode de stringification JSON plus s?re console.log("PaxID:", paxIDbody);
  essayer {
    paramètres const = {
      méthode : "POST",
      en-têtes?:?{
        "Content-type": "application/json; charset=UTF-8"
      },
      corps?: paxIDbody,
    }?;
    réponse const = attendre la récupération (
      "/change-name.php",
      paramètres
    );

    if (!response.ok) { // Vérifiez le code d'état de la réponse HTTP throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = attendre réponse.json();
    console.log("DONNéES?: ", données);

    // Une fois la requête réussie et les données traitées, actualisez la page actuelle location.reload();

  } attraper (erreur) {
    console.erreur("ERREUR?: ", erreur); // Utilisez console.error pour imprimer les erreurs // Vous pouvez afficher des messages d'erreur à l'utilisateur ici}
}

Choses à noter?:

• Gestion des erreurs?: dans la demande d'extraction, l'attribut réponse.ok peut être utilisé pour vérifier si le code d'état de la réponse HTTP est compris entre 200 et 299. Il s'agit d'une méthode de gestion des erreurs plus robuste que de simplement compter sur try...catch, car fetch ne générera pas d'erreur en cas d'erreurs HTTP (telles que 404, 500), uniquement en cas de problèmes de réseau.
• Commentaires de l'utilisateur?: avant l'actualisation de la page, vous pouvez envisager de donner un bref retour à l'utilisateur, par exemple en affichant le message "Mise à jour..." ou "Mise à jour réussie?!" pour améliorer l’expérience utilisateur.
• JSON.stringify?:?l'utilisation de JSON.stringify() pour créer un corps de requête JSON est plus s?re et plus robuste que l'épissage manuel de cha?nes, et peut éviter d'éventuelles erreurs de format et problèmes d'injection.

Point de terminaison du back-end PHP

Votre point de terminaison backend PHP est le bon moyen de renvoyer des données JSON, car il s'agit d'une interface API et ne doit pas tenter de redirections de pages.

 <?php header(&#39;Content-type:application/json;charset=utf-8&#39;);
// Supposons que les variables $status et $message ont été définies en fonction des résultats de l&#39;opération de base de données $myObj=new \stdClass();
$monObj->statut = $statut;
$monObj->message = $message;
$monJSON = json_encode($monObj);
echo $monJSON?;
?>

Ce code PHP est une réponse API JSON standard, il n'entra?ne pas de navigation dans le navigateur, le problème vient donc du comportement par défaut des boutons frontend.

Résumer

Pour réussir à rester sur la page actuelle et à la rafra?chir après une requête POST de récupération asynchrone, la clé est?:

1. Empêcher la navigation par défaut?: assurez-vous que le bouton qui déclenche la demande de récupération possède l'attribut type="button", ou si le bouton se trouve dans un formulaire, utilisez event.preventDefault() pour empêcher le comportement de soumission par défaut du formulaire.
2. Actualisation de la page?: une fois la demande d'extraction terminée avec succès et les données de réponse traitées, location.reload() est appelé pour actualiser la page actuelle afin d'afficher le dernier état des données.

Grace aux étapes ci-dessus, vous serez en mesure de créer un processus de mise à jour des données asynchrone plus convivial et fonctionnel.