jQuery

[AJAX] JQ - serialize() 메서드 ★ = 전송 위해 폼 요소 집합을 직렬화 (= serialize메서드 = 아작스 시리얼라이즈메서드)

목차
  1. serialize() 예제 - 폼 요소 집합 직렬화
  2. serialize() 정의
  3. serialize() 구문

 

serialize() 예제 - 폼 요소 집합 직렬화 

 

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("div").text($("form").serialize());

    });

});

</script>

</head>

<body>


<form action="">

  site: <input type="text" name="site" value="homzzang.com"><br>

  year: <input type="text" name="year" value="2012"><br>

</form>


<button>폼 값 직렬화 시키기</button>


<div></div>


</body>

</html>


결과값: site=homzzang.com&year=2012

 

serialize() 정의

 

Form 요소 집합을 직렬화(= 전송 가능한 문자열 형태로 변환)하여 URL로 인코딩 된 텍스트 문자열을 생성.

 


 

1.

하나 이상의 양식 요소 (예 : 입력 영역 및 / 또는 텍스트 영역) 또는 양식 요소 자체를 선택 가능.

 

2.

직렬화 된 값은 AJAX 요청을 만들 때 URL쿼리 문자열에서 사용 가능.

 


serialize() 구문

 

$(selector).serialize()

 


[매개변수]

 

없음.

 



분류 제목
HTML_CSS JQ - offset() 메서드 ★ - 오프셋 (=xy좌표) 설정/반환. (= offset메서드 = 오프셋메…
HTML_CSS JQ - outerHeight() 메서드 - 요소 높이 반환 (height + padding + border…
HTML_CSS JQ - outerWidth() 메서드 - 요소 너비 반환 (※ padding, border 둘다 포함) (…
HTML_CSS JQ - position() 메서드 - 부모요소 기준으로 요소 위치 반환 (= position메서드 = 포지…
HTML_CSS JQ - prepend() 메서드 - 선택요소 안 시작부분에 내용 삽입 (= prepend메서드 = 프리펜드…
HTML_CSS JQ - prependTo() 메서드 - 선택요소 시작부분에 HTML 요소삽입 (= prependTo메서드 …
HTML_CSS JQ - prop() 메서드 - 속성과 속성값 설정/반환. (= prop메서드 = 프랍메서드 = 프롭메서드)…
HTML_CSS JQ - remove() 메서드 - 선택요소 제거 (= remove메서드 = 리무브 메서드)
HTML_CSS JQ - removeAttr() 메서드 - 1개 이상의 속성 제거 (= removeAttr메서드 = 리무브어…
HTML_CSS JQ - removeClass() 메서드 ★ - 클래스 제거 (= removeClass메서드 = 리무브클래스…
HTML_CSS JQ - removeProp() 메서드 - prop() 메서드로 설정된 속성 제거. (= removeProp…
HTML_CSS JQ - replaceAll() 메서드 - 선택요소를 새 HTML 요소로 대체 (= replaceAll메서드…
HTML_CSS JQ - replaceWith() 메서드 ★ - 선택요소 내용를 새 내용으로 대체/변경 (= replaceW…
HTML_CSS JQ - scrollLeft() 메서드 - 선택요소 가로 스크롤바 위치 설정/반환 (= scrollLeft메…
HTML_CSS JQ - scrollTop() 메서드 ★ - 선택요소 세로 스크롤바 위치 설정/반환 (= scrollTop메…
13/20
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인