Pourquoi ma publication AJAX échoue-t-elle lors du chargement d'un formulaire avec $.load() de jQuery ?

Échec de la publication Ajax dans un formulaire chargé

Dans un scénario où un clic sur un bouton déclenche le chargement d'un formulaire externe à l'aide de $.load( ), un problème survient lorsque le formulaire tente de publier des données. Au lieu d'être redirigée vers le fichier PHP prévu, la page se recharge d'elle-même.

Présentation d'AJAX

Avant de se plonger dans la solution, il est crucial de comprendre le concept d'AJAX ( JavaScript et XML asynchrones). AJAX permet aux sites Web d'échanger des données avec un serveur sans actualiser la page entière.

Le problème et la solution

Le problème ici vient d'un manque de compréhension du fonctionnement d'AJAX . Le bouton déclenche le chargement d'un formulaire externe à l'aide de $.load(), mais cela n'établit pas de requête AJAX. Pour publier des données via AJAX, le formulaire doit être soumis à l'aide de la fonction $.ajax().

Exemple de code

Considérez le code révisé suivant :

$('#Sel').change(function() {
    var opt = $(this).val();
    var someelse = 'Hello';
    var more_stuff = 'Goodbye';
    $.ajax({
        type: "POST",
        url: "receiving_file.php",
        data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
        success:function(data){
            alert('This was sent back: ' + data);
        }
    });
});

Dans ce code révisé, les données du formulaire sont publiées à l'aide de $.ajax(). Le script enverra la valeur sélectionnée et les paramètres supplémentaires au "receive_file.php" et affichera les données renvoyées dans une boîte d'alerte.

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!