Maison >interface Web >js tutoriel >Comment publier des données dans un fichier PHP sans recharger la page à l'aide d'AJAX ?

Comment publier des données dans un fichier PHP sans recharger la page à l'aide d'AJAX ?

DDD
DDDoriginal
2024-11-12 08:44:01471parcourir

How to Post Data to a PHP File Without Reloading the Page Using AJAX?

Problème : difficulté à publier des formulaires dans $.load

Lorsque vous essayez d'exécuter du code en cliquant sur un bouton, vous rencontrez un problème où les données de publication ne sont pas transférées avec succès vers un fichier PHP spécifié nommé "MonsterRequest.php". Au lieu de cela, la page se recharge comme si les données étaient envoyées à la page parent principale. L'objectif est de publier des données sans provoquer de rechargement de la page.

Explication :

AJAX : JavaScript et XML asynchrones

Pour comprendre cette problématique, il est important de se familiariser avec AJAX. AJAX est une technique utilisée en développement web pour permettre l'échange de données entre un navigateur web et un serveur web sans recharger la page. Ceci est possible en utilisant l'objet XMLHttpRequest en JavaScript, qui envoie des requêtes au serveur Web de manière asynchrone.

Dans votre code, vous utilisez $.load pour charger le fichier "MonsterRequest.php" dans le div "CenterPièce". . Cependant, cette méthode n'est pas appropriée pour la comptabilisation de données. Il est principalement utilisé pour charger du contenu externe dans un élément spécifié.

Solution :

Pour publier des données sans recharger la page, vous devez utiliser la méthode $.ajax. Cette méthode vous permet d'envoyer des données asynchrones à un script côté serveur et de recevoir une réponse sans affecter le contenu de la page principale.

Voici une version modifiée de votre code en utilisant $.ajax :

    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);

    $.ajax({
        url: Readthis,
        type: "POST",
        data: {
            Mon: TestVar
        },
        success: function(data) {
            // Handle the server response here (e.g., display data in the "CenterPiece" div)
        }
    });

Dans ce code, la méthode $.ajax est utilisée pour poster les données contenues dans la variable "TestVar" dans "MonsterRequest.php" sans recharger la page. La fonction "succès" peut être utilisée pour gérer la réponse du serveur et mettre à jour le DOM si nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn