-
제이쿼리 - 직렬화프로그래밍/jQuery 제이쿼리 2021. 10. 30.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body { font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; cursor: pointer; } a:active, a:hover { text-decoration: underline; color: #F28011; } .btn { color: #333; border: 1px solid #333; background-color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 500; cursor:pointer; font-size: 14px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; /* 부모 요소의 기준선에 맞춤 */ } .btn:hover, .btn:active, .btn:focus { background-color: #e6e6e6; border-color: #adadad; color:#333; } .btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; } .boxTF { border: 1px solid #999; padding: 5px 5px; background-color: #fff; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .selectField { border: 1px solid #999; padding: 4px 5px; border-radius: 4px; font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif; vertical-align: baseline; } .boxTA { border:1px solid #999; height:150px; padding:3px 5px; border-radius:4px; background-color:#fff; resize : none; vertical-align: baseline; } textarea:focus, input:focus { outline: none; } h3{ margin: 20px; } .box{ width: 500px; margin: 30px auto; } .box table { width: 100%; border-collapse: collapse; border-spacing: 0; } table.score-body tr:first-child{ border-top: 3px solid #777; } table.score-body tr{ height: 40px; border-bottom: 1px solid #777; } table.score-body tr td:first-child{ width: 100px; background: #eee; text-align: center; } table.score-body tr td:nth-child(2){ box-sizing: border-box; width: 400px; padding-left: 10px; text-align: left; } table.score-footer tr{ height: 45px; text-align: center; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".btnSend1").click(function(){ var query = $("form[name=scoreForm]").serialize(); alert(query); }); $(".btnSend2").click(function(){ var obj = $("form[name=scoreForm]").serializeArray(); var query = JSON.stringify(obj); alert(query); }); $("form[name=scoreForm]").submit(function(){ var query = $(this).serialize(); alert(query); return false; // 서버로 전송 안함 }); }); /* -- 직렬화 직렬화 : 폼 자료를 "a=1&b=2&c=3&d=4&e=5" 처럼 결합 .serialize() : 입력된 모든 Element(을)를 문자열의 데이터에 serialize 한다. .serializeArray() : serialize 메소드와 같이 Form(이)나 Element(을)를 serialize 하여 JSON 형식의 데이터 구조로 반환 값을 돌려준다. */ </script> </head> <body> <h3>직렬화</h3> <div class="box"> <form name="scoreForm" method="post"> <table class="score-body"> <tr> <td>학번</td> <td> <input type="text" name="hak" class="boxTF inputs" maxlength="10"> </td> </tr> <tr> <td>이름</td> <td> <input type="text" name="name" class="boxTF inputs" maxlength="10"> </td> </tr> <tr> <td>생년월일</td> <td> <input type="text" name="birth" class="boxTF inputs" maxlength="10"> </td> </tr> <tr> <td>국어</td> <td> <input type="text" name="kor" class="boxTF inputs" maxlength="3"> </td> </tr> <tr> <td>영어</td> <td> <input type="text" name="eng" class="boxTF inputs" maxlength="3"> </td> </tr> <tr> <td>수학</td> <td> <input type="text" name="mat" class="boxTF inputs" maxlength="3"> </td> </tr> </table> <table class="score-footer"> <tr> <td> <button type="button" class="btn btnSend1">직렬화</button> <button type="button" class="btn btnSend2">직렬화-JSON</button> <button type="submit" class="btn">서브밋 버튼</button> </td> </tr> </table> </form> </div> </body> </html>제이쿼리의 직렬화는 serialize() 메소드를 사용하면 된다.
만약 JSON 형태로 직렬화를 하고싶을 경우에는 serializeArray()를 사용하면 된다.
반응형'프로그래밍 > jQuery 제이쿼리' 카테고리의 다른 글
제이쿼리 - 스크롤 바 다루기 (0) 2021.11.01 제이쿼리 - 응용(댓글, 답글, 리스트 옮기기) (2) 2021.11.01 제이쿼리 - 기초(4) (0) 2021.10.30 제이쿼리 - 기초(3) / 이벤트 (0) 2021.10.30 제이쿼리 - 기초(2) (0) 2021.10.29
