Comment puis-je soumettre un formulaire en utilisant jQuery AJAX sans publication ?

Utiliser jQuery AJAX pour soumettre un formulaire

Lorsque vous travaillez avec des formulaires, il peut être souhaitable de soumettre les données du formulaire à un script PHP à l'aide d'AJAX plutôt que d'effectuer une publication traditionnelle. L'un des défis pour y parvenir est de collecter et d'envoyer toutes les entrées du formulaire.

Heureusement, jQuery propose une solution simple avec sa méthode serialize(). Voici comment vous pouvez le mettre en œuvre :

1. Désactivez la soumission par défaut du formulaire :

$('#formId').submit(function(event) {
  event.preventDefault();
});

2. Sérialiser les données du formulaire :

La méthode serialize() sérialise les éléments du formulaire et renvoie une chaîne de requête, qui peut être utilisée dans une requête AJAX.

3. Faites la requête AJAX :

$.ajax({
  type: "POST",
  url: "targetScript.php",
  data: $('#formId').serialize(),
  success: function(data) {
    // Handle the response from the PHP script
  }
});

Dans le code ci-dessus, remplacez formId par l'ID réel de votre formulaire et targetScript.php par l'URL du script PHP qui traitera les données du formulaire.

Exemple de gestion des réponses :

Dans la fonction de réussite de la requête AJAX, vous peut gérer la réponse renvoyée par le script PHP. Par exemple, si vous attendez un message de réussite, vous pouvez l'afficher en utilisant :

success: function(data) {
  alert("Your order has been submitted successfully.");
}

En suivant ces étapes, vous pouvez soumettre de manière transparente les données du formulaire à l'aide de jQuery AJAX sans avoir à collecter manuellement toutes les entrées du formulaire.

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!