jQuery: AJAX로 양식 제출

Habdul Hazeez 2024년2월15일

jQuery jQuery AJAX

jQuery에서 AJAX로 양식 제출: 직접 접근
jQuery 양식 플러그인을 사용하여 jQuery에서 AJAX로 양식 제출
jQuery에서 AJAX로 양식 제출: FormData 접근 방식

이 기사에서는 AJAX-in-jQuery를 사용하여 양식을 제출하는 세 가지 방법을 설명합니다. 첫 번째는 AJAX-in-jQuery를 직접 사용하는 것이고 두 번째는 AJAX Form Plugin을 사용하는 것입니다.

세 번째 방법에서는 FormData 개체를 사용하여 AJAX를 사용하여 양식 데이터를 보내기 전에 가져옵니다.

jQuery에서 AJAX로 양식 제출: 직접 접근

외부 라이브러리나 특별한 것이 없기 때문에 이것을 “직접 접근"이라고 합니다. 먼저 HTML 양식을 설정하고 올바른 이름 속성이 있는지 확인합니다.

그런 다음 jQuery를 사용하여 다음을 수행하십시오.

jQuery를 사용하여 양식 제출을 수신합니다.
기본 제출 동작을 방지합니다.
jQuery에서 ajax() 메서드를 사용하여 AJAX 연결을 시작합니다.
ajax()의 type 속성이 POST인지 확인합니다.
url 속성 값이 HTML action 속성 값인지 확인합니다.
data 속성 값이 모든 양식 입력의 직렬화된 형식인지 확인합니다.
success 속성 값으로 함수를 사용하여 반환 데이터를 처리합니다.
함수를 error 속성 값으로 사용하여 오류를 처리합니다.

다음 코드에서 이러한 단계의 코드 구현을 찾을 수 있습니다. HTML 양식 속성의 값은 양식을 “처리"하는 PHP 스크립트입니다.

이번에는 제출된 데이터만 콘솔에 표시됩니다. 그러나 양식 데이터를 데이터베이스에 제출할 수 있습니다. 이 기사의 끝에서 PHP 스크립트를 찾을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>01-jQuery AJAX Submit form</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh; }
        form { border: 3px solid #1560bd; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $("#html_form").submit(function(event) {
            // Prevent the default submit behavior
            event.preventDefault();
            // "this" refers to the current HTML form
            let current_html_form = $(this);
            let action_url = current_html_form.attr('action');

            $.ajax({
                type: "POST",
                url: action_url,
                data: current_html_form.serialize(), // Turn the form elements into a usable string
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    alert("An error occurred during form submission");
                },
            });
        });
    </script>
</body>
</html>

출력:

AJAX Form submit with jQuery

jQuery 양식 플러그인을 사용하여 jQuery에서 AJAX로 양식 제출

이 방법은 jQuery에서 AJAX를 사용하지만 다르게 양식을 제출하게 됩니다. 이번에는 jQuery Form Plugin에서 ajaxForm 메서드를 사용하겠습니다.

다음을 제외하고 AJAX를 사용하여 양식을 제출하는 방법은 동일합니다.

jQuery 양식 플러그인을 스크립트로 가져옵니다.
플러그인의 ajaxForm 메서드를 사용합니다. 무대 뒤에서 이것은 양식 제출을 처리합니다.
url 속성 값은 제출된 데이터를 처리할 스크립트의 이름입니다.
$.ajax()를 쓰지 않고 대신 $(form_selector).ajaxForm()을 씁니다. 여기서 form_selector는 HTML 양식의 클래스 또는 ID 이름입니다.

다음 코드에서 이러한 단계를 구현했습니다. 다음 이미지에서 출력을 확인할 수 있습니다.

참고로 이 문서의 끝에 PHP 스크립트가 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>02-jQuery-AJAX-with-AJAX-Form.html</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha512-YUkaLm+KJ5lQXDBdqBqk7EVhJAdxRnVdT2vtCzwPHSweCzyMgYV/tgGF4/dCyqtCC2eCphz0lRQgatGVdfR0ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh; }
        form { border: 3px dotted #0a9; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $(function(){
            $('#html_form').ajaxForm({
                type: "POST",
                url:'process-jquery-form.php',
                success: function (data) {
                    console.log(data);
                },
                error: function (data) {
                    alert("An error occurred during form submission");
                },
            })
        });
    </script>
</body>
</html>

출력:

jQuery Form Plugin으로 양식 제출

jQuery에서 AJAX로 양식 제출: `FormData` 접근 방식

이 방법은 외부 라이브러리가 포함되지 않기 때문에 직접 접근 방식과 동일합니다. 그러나 이번에는 FormData 개체를 사용하여 양식 데이터를 가져옵니다.

ajax() 메서드의 나머지 단계는 다음 추가 사항과 함께 동일하게 유지됩니다.

processData 속성을 추가하고 해당 값을 false로 설정합니다.
contentType 속성을 추가하고 해당 값을 false로 설정합니다.
error 속성의 함수는 jQXHR, textStatus 및 errorMessage를 인수로 가져야 합니다. 그런 다음 errorMessage 인수를 사용하여 오류 메시지를 표시합니다.

다음 코드는 이를 수행하는 방법을 보여줍니다. 다음 섹션에서 PHP 스크립트를 찾을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>03-jQuery-AJAX-with-FormData.html</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body { display: grid; justify-content: center; align-items: center; height: 100vh;}
        form { border: 3px dashed #1975c7; font-size: 1.2em; padding: 1.2em; }
    </style>
</head>
<body>
    <main>
        <form id="html_form" action="process-jquery-form.php" method="POST">
            <label for="first_name">First name</label>
            <input id="first_name" type="text" name="first_name" required>
            <label for="last_name">Last name</label>
            <input id="last_name" type="text" name="last_name" required>
            <input type="submit" name="submit" value="Submit form">
        </form>
    </main>
    <script>
        $("#html_form").submit(function(event) {
            // Prevent the default submit behavior
            event.preventDefault();

            let current_html_form = $(this);
            let action_url = current_html_form.attr('action');
            // Grab the form data using the FormData Object
            // Later, we'll use the data in the ajax request.
            let form_data = new FormData(document.getElementById('html_form'));

            $.ajax({
                type: "POST",
                url: action_url,
                data: form_data,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data);
                },
                error: function (jQXHR, textStatus, errorMessage) {
                    console.log(errorMessage);
                },
            });
        });
    </script>
</body>
</html>

출력:

AJAX로 제출하기 전에 FormData 객체로 양식 데이터 가져오기

HTML 양식용 PHP 스크립트

다음은 이 예제에서 HTML 양식을 처리하는 데 사용되는 PHP 스크립트입니다. 작업 디렉토리에 process-jquery-form.php로 저장할 수 있습니다.

<?php
    // We detect an AJAX request from jQuery before
    // processing the form data.
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])
        && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        if (isset($_POST['first_name']) && isset($_POST['last_name'])) {
            $first_name = $_POST['first_name'];
            $last_name = $_POST['last_name'];
            // Here, we show the first and last names.
            // In your application, you can send them
            // to your database.
            echo "Hello " . htmlspecialchars($first_name) ." " . htmlspecialchars($last_name);
        }
    }
?>

작가: Habdul Hazeez

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

jQuery에서 AJAX로 양식 제출: 직접 접근

jQuery 양식 플러그인을 사용하여 jQuery에서 AJAX로 양식 제출

jQuery에서 AJAX로 양식 제출: FormData 접근 방식

HTML 양식용 PHP 스크립트

관련 문장 - jQuery AJAX

jQuery에서 AJAX로 양식 제출: `FormData` 접근 방식