jQuery와 PHP를 사용하여 페이지 새로 고침 없이 양식 데이터를 제출하는 방법은 무엇입니까?

jQuery 및 PHP(form.php)를 사용하여 Ajax를 통해 양식 데이터 제출

양식 제출 시 브라우저 리디렉션을 방지하려면 jQuery를 활용할 수 있습니다. 그리고 아약스. 제공된 것과 같은 양식에 대해 이를 달성하는 방법은 다음과 같습니다.

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

대신 약어로 .post를 사용할 수도 있습니다. jQuery의 .ajax:

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

팁:

• 악성 삽입을 방지하려면 게시된 데이터를 삭제하세요.
• jQuery 코드를 $(document).ready() 핸들러.
• 콜백을 연결할 수 있습니다. 더 많은 제어를 위한 핸들러(done(), failure(), Always()).

위 내용은 jQuery와 PHP를 사용하여 페이지 새로 고침 없이 양식 데이터를 제출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!