jquery ajax 폼 데이터 전송
컨텐츠 정보
- 1,121 조회
- 0 추천
- 목록
본문
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Form Submission</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe"><br><br>
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
SCRIPT (script.js)
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // 폼의 기본 제출 방지
// 폼 데이터를 객체로 변환
var formData = {
name: $('#name').val(),
email: $('#email').val(),
subscribe: $('#subscribe').is(':checked'), // 체크박스 상태를 불리언 값으로 가져오기
gender: $('input[name="gender"]:checked').val() // 선택된 라디오 버튼의 값을 가져오기
};
// AJAX 요청
$.ajax({
url: 'your-server-endpoint', // 서버 엔드포인트 URL로 변경
type: 'POST',
contentType: 'application/json', // JSON 데이터 전송
data: JSON.stringify(formData), // 데이터를 JSON 문자열로 변환
success: function(response) {
// 성공 콜백
console.log('Success:', response);
},
error: function(xhr, status, error) {
// 에러 콜백
console.error('Error:', error);
}
});
});
});
