Wie übermittle ich Formulardaten ohne Seitenaktualisierung mit jQuery und PHP?

Formulardaten über Ajax mit jQuery und PHP (form.php) senden

Um die Browserumleitung beim Senden von Formularen zu verhindern, können Sie jQuery nutzen und Ajax. So erreichen Sie dies für ein Formular wie das bereitgestellte:

<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;

Sie können in auch die Abkürzung .post anstelle von .ajax verwenden jQuery:

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

Tipps:

• Gepostete Daten bereinigen, um bösartige Injektionen zu verhindern.
• Platzieren Sie den jQuery-Code innerhalb eines $( document).ready() Handler.
• Sie können Callback-Handler verketten (done(), fail(), Always()) für mehr Kontrolle.

Das obige ist der detaillierte Inhalt vonWie übermittle ich Formulardaten ohne Seitenaktualisierung mit jQuery und PHP?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!