페이지 새로 고침 없이 jQuery Ajax POST를 사용하여 양식을 제출하려면 어떻게 해야 합니까?

PHP를 사용한 jQuery Ajax POST 예제

이 예제에서는 jQuery의 Ajax 기능을 사용하여 양식 데이터를 PHP 스크립트로 보내는 방법을 보여줍니다.

문제

기존 방법을 사용하여 양식을 제출할 때 브라우저가 지정된 작업 URL로 리디렉션됩니다. 그러나 우리는 페이지를 새로 고치지 않고 양식 데이터를 캡처하여 PHP 스크립트에 제출하려고 합니다.

jQuery 및 Ajax 솔루션

jQuery의 .ajax 메소드를 사용하면 서버에 비동기 요청을 하게 됩니다. 이를 사용하여 양식 데이터를 보내는 방법은 다음과 같습니다.

HTML:

<form>

jQuery:

$("#foo").submit(function(event) {
    event.preventDefault();

    var $form = $(this);
    var serializedData = $form.serialize();

    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        done: function (response, textStatus, jqXHR) {
            console.log("Hooray, it worked!");
        },
        fail: function (jqXHR, textStatus, errorThrown) {
            console.error("The following error occurred: " + textStatus, errorThrown);
        },
        always: function () {
            // Reenable form inputs
        }
    });
});

PHP (form.php):

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

이 솔루션은 .done() 및 .fail() 콜백 핸들러를 사용하여 각각 성공 및 실패 시나리오를 처리합니다. .always() 콜백은 요청 결과에 관계없이 호출됩니다.

추가 참고 사항:

• 대신 jQuery 단축 .post를 사용할 수 있습니다. .ajax.
• 이 코드는 jQuery 버전 1.8 이상과 호환됩니다.

위 내용은 페이지 새로 고침 없이 jQuery Ajax POST를 사용하여 양식을 제출하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!