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()로 코딩 시간 단축해서 남은 시간은 여유를 즐기시기 바랍니다!!