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
Libérer: 2024-11-12 08:44:01
original
496 Les gens l'ont consulté

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)
        }
    });
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal