Pourquoi les formulaires contenus dans un appel $.load() ne parviennent-ils pas à être publiés correctement et comment AJAX peut-il résoudre ce problème ?

Le formulaire à l'intérieur de $.load ne publie pas correctement ? Une explication détaillée du problème

Il est courant de rencontrer des situations dans lesquelles les formulaires intégrés dans une zone chargée via $.load ne parviennent pas à publier correctement les données. Le nœud du problème réside dans la nature asynchrone de $.load, qui charge le contenu dans un élément spécifique sans recharger la page entière. Cela peut entraîner une différence entre l'action cible du formulaire et l'URL réelle où réside la page.

Pour illustrer le problème, prenons un exemple :

<pre class="brush:php;toolbar:false">
    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&amp;Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);
    $('#CenterPiece').load(Readthis); 

Dans cet exemple, lorsque un bouton est cliqué, il exécute du code qui charge le contenu de "MonsterRequest.php" dans un élément avec l'ID "CenterPièce". Cependant, comme $.load est asynchrone, la soumission du formulaire se produit avant que le contenu de « MonsterRequest.php » ne soit complètement chargé. Cela signifie que le formulaire est soumis à l'URL de la page actuelle, plutôt qu'à l'URL cible prévue spécifiée dans son attribut d'action.

Comprendre AJAX et comment il résout le problème

Pour résoudre le problème , il est nécessaire d'utiliser AJAX (Asynchronous JavaScript and XML). AJAX permet aux pages Web de communiquer avec les serveurs de manière asynchrone, sans recharger la page entière. Cela garantit que les formulaires intégrés dans un contenu chargé dynamiquement peuvent soumettre correctement les données à la cible prévue.

Essentiellement, AJAX vous permet d'envoyer des données à un fichier PHP sur le serveur, de traiter les données et de renvoyer une réponse sans recharger la page. Le workflow est le suivant :

Fichier n° 1 :

<pre class="brush:php;toolbar:false">
    <script>
        $(document).ready(function() {
            $('#Sel').change(function() {
                var opt = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "receiving_file.php",
                    data: 'selected_opt=' + opt,
                    success:function(data){
                        alert('This was sent back: ' + data);
                    }
                });
            });
        });
    </script>

Dans ce script, lorsque la liste déroulante « Sel » change, elle déclenche une requête AJAX. La requête est envoyée à "receive_file.php" et contient la valeur de l'option sélectionnée.

Fichier n°2 : réception_file.php

<pre class="brush:php;toolbar:false">
    <?php
        $recd = $_POST['selected_opt'];
        echo 'You chose: ' . $recd;
    

Dans ce fichier PHP, les données reçues sont stockées dans la variable $recd et une réponse est renvoyée au client.

Résultat :

Lorsque l'option est modifiée dans « Fichier n°1 », une requête AJAX est envoyée au « Fichier n°2 ». Les données sont traitées et une réponse est renvoyée au client sans recharger la page.

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!