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
속성 값이 HTMLaction
속성 값인지 확인합니다.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>
출력:
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에서 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>
출력:
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 is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn