Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

Web/Script

jQuery Ajax 사용 시 Form 데이타를 한방에 쉽게 전송하기!! | serialize()

웹아이 2022. 2. 26. 18:10

 

Ajax로 프로그램을 만들 때 혹은 Form데이터를 Query String 형식으로 변경해서 사용할 때 어떠한 방법을 사용하시나요?

 

일일이 하나씩 데이터를 불러와서 사용합니다!

 

네, 보통은 폼 값을 하나씩 불러와 Ajax 데이터로 만들어서 사용하는 경우가 대부분일 겁니다.

하지만 불어와야 하는 Form 데이터가 30개? 50개? 100개?

이렇게 항목이 많은 경우에는 하나씩 불러와서 넣어주는 건 너무 힘들어요ㅜ

이럴 때 사용할 수 있는 jQuery의 유용한 함수가 있습니다.

 

바로 serialize()입니다.

 

serialize함수는 실렉터 한 폼의 input 데이터들을 쿼리 스트링으로 변경해주는 역할을 합니다.

저는 ajax로 예를 들었지만 폼 데이터를 쿼리 스트링으로 사용해야 할 때 유용하게 사용할 수 있습니다.

 

<form name="frm">
    <input type="text" name="name">
    <input type="text" name="tel">
    <textarea name="message"></textarea>
</form>

위와 같은 코드의 폼이 있을 때 사용 방법은 간단합니다.

 

let frmData = $("form[name=frm]").serialize()
console.log(frmData) 

/*
frmData 변수 값
name=홍길동&tel=010-1111-2222&message=테스트입니다
*/

 

딱 한 줄의 코드로 폼의 데이터를 불러올 수 있는데 Form을 셀렉터 하시고 serialize() 함수만 사용해주면 됩니다.

위 예제의 frmData 변수에는 우리가 URL 주소에서 많이 봐 왔던 쿼리 스크링으로 키=값&키=값&키=값과 같은 형식으로 변환된 값이 변수에 들어가 있는 것을 확인하실 수 있습니다.

"키"에는 input의 name이 "값"에는 사용자가 입력한 값이 들어가게 됩니다.

 

 

let frmData = $("form[name=frm]").serialize()

$.ajax({
    url : './test.php',
    type : 'post',
    data : frmData,
    success:function(data){
      
    }
})

이걸 Ajax에서 사용할 경우에는 data 속성에 frmData 변수만 넣어주게 되면 끝!!

 

간단하죠?

ajax 사용하실 때 노가다 하지 마시고 꼭 serialize()로 코딩 시간 단축해서 남은 시간은 여유를 즐기시기 바랍니다!!

 

반응형
1 2 3 4 5 6 7 8 ··· 62