Comment soumettre des données de formulaire sans actualisation de page à l'aide de jQuery et PHP ?

Soumission des données de formulaire via Ajax avec jQuery et PHP (form.php)

Pour empêcher la redirection du navigateur lors de la soumission de formulaires, vous pouvez tirer parti de jQuery et l'Ajax. Voici comment y parvenir pour un formulaire comme celui fourni :

<form>

jQuery :

$(document).ready(function () {
    $('#foo').submit(function (event) {
        event.preventDefault();
        var $form = $(this);
        var $inputs = $form.find('input, select, button, textarea');
        var serializedData = $form.serialize();
        $inputs.prop('disabled', true);
        $.ajax({
            url: '/form.php',
            type: 'post',
            data: serializedData,
            done: function (response) {
                console.log('Hooray, it worked!');
            },
            fail: function (jqXHR, textStatus, errorThrown) {
                console.error(
                    'The following error occurred: ' +
                        textStatus,
                    errorThrown
                );
            },
            always: function () {
                $inputs.prop('disabled', false);
            }
        });
    });
});

PHP (form.php) :

// Access posted data through $_POST
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;

Vous pouvez également utiliser le raccourci .post au lieu de .ajax dans jQuery :

$.post('/form.php', serializedData, function (response) {
    console.log('Response: ' + response);
});

Conseils :

• Assainissez les données publiées pour éviter les injections malveillantes.
• Placez le code jQuery dans un $( document).ready() handler.
• Vous pouvez enchaîner les gestionnaires de rappel (done(), fail(), always()) pour plus de contrôle.

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!