제이쿼리 - 직렬화

제이쿼리 - 직렬화

Insert title here *{ 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; } $(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 형식의 데이터 구조로 반환 값을 돌려준다. */ 직렬화 학번 이름 생년월일 국어 영어 수학 직렬화 직렬화-JSON 서브밋 버튼

제이쿼리의 직렬화는 serialize() 메소드를 사용하면 된다.

만약 JSON 형태로 직렬화를 하고싶을 경우에는 serializeArray()를 사용하면 된다.

from http://heidong.tistory.com/139 by ccl(A) rewrite - 2021-10-30 17:28:09