Maison > interface Web > js tutoriel > Comment puis-je utiliser jQuery Ajax POST avec PHP pour soumettre un formulaire sans redirection de page ?

Comment puis-je utiliser jQuery Ajax POST avec PHP pour soumettre un formulaire sans redirection de page ?

Mary-Kate Olsen
Libérer: 2024-12-24 05:52:14
original
904 Les gens l'ont consulté

How Can I Use jQuery Ajax POST with PHP to Submit a Form Without Page Redirect?

jQuery Ajax POST avec PHP : un exemple

La soumission de données d'un formulaire à une base de données nécessite souvent une soumission de formulaire, ce qui provoque un navigateur réorienter. En utilisant jQuery et Ajax, il est possible de surmonter ce problème en capturant les données du formulaire et en les soumettant à un script PHP.

Code jQuery :

Le code jQuery est le suivant :

<form>
Copier après la connexion
// Prevent form submission
$("#foo").submit(function(event){
    event.preventDefault();
    
    // Serialize form data
    var serializedData = $("#foo").serialize();
    
    // Ajax request
    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        success: function (response) {
            console.log("Request successful");
        },
        error: function (error) {
            console.error("Error:", error);
        }
    });
});
Copier après la connexion

PHP Script :

Le script PHP (form.php) reçoit les données soumises :

<?php
    $bar = isset($_POST['bar']) ? $_POST['bar'] : null;
?>
Copier après la connexion

Utilisation :

Enveloppez votre JavaScript code dans un gestionnaire prêt pour le document :

$(document).ready(function(){
    // jQuery code
});
Copier après la connexion

N'oubliez pas de nettoyer les entrées lorsque vous travaillez avec des données soumises par l'utilisateur. data.

Raccourci avec jQuery .post :

$.post('/form.php', serializedData, function(response) {
    console.log("Response:", response);
});
Copier après la connexion

Cette méthode peut être utilisée avec les versions jQuery 1.5 et supérieures.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal