• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Ajax Form</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <script>
9
        $(function() {
10
            $("form").on("submit", function(event) {    // <form>요소에 "submit" 이벤트가 발생할 때,
11
                event.preventDefault();                 // 서버로 전송하지 않음.
12
                $("#text").html($(this).serialize());   // 입력받은 데이터를 직렬화하여 나타냄.
13
            });
14
        });
15
    </script>
16
</head>
17
​
18
<body>
19
​
20
    <h1>직렬화(serialization)</h1>
21
    <form action="/examples/media/request.php">
22
        자신의 별명을 적어주세요 : <br>
23
        <input type="text" name="nickname" value="홍길동"><br><br>
24
​
25
        현재 살고 있는 지역을 선택해 주세요 : <br>
26
        <input type="radio" name="region" value="서울" checked> 서울 <br>
27
        <input type="radio" name="region" value="경기"> 경기 <br>
28
        <input type="radio" name="region" value="대전"> 대전 <br>
29
        <input type="radio" name="region" value="부산"> 부산 <br>
30
        <input type="radio" name="region" value="광주"> 광주 <br><br>
31
​
32
        좋아하는 음악 장르를 모두 골라주세요 : <br>
33
        <input type="checkbox" name="music" value="팝" checked> 팝 <br>
34
        <input type="checkbox" name="music" value="재즈"> 재즈 <br>
35
        <input type="checkbox" name="music" value="댄스"> 댄스 <br>
36
        <input type="checkbox" name="music" value="발라드"> 발라드 <br><br>
37
​
38
        <input type="submit" value="전송">
39
    </form>
40
    <p id="text"></p>
41
42
</body>
43
​
44
</html>