[제이쿼리] form의 내용을 한번에 오브젝트로 만들기

form 안의 input 데이터들을 ajax로 날려주거나 오브젝트로 만들어야 할때

하나하나 네임이나 id값으로 불러와서 만들기엔 너무나도 귀찮은 작업이다.

이걸 한번에 해결해 줄수 있는 방법에 대해서 알아보자

일단 제이쿼리 플러그인을 사용해야 한다

제이쿼리 시리얼라이즈 링크

사용 방법은

두가지가 있다

하나는 배열로 만들기 하나는 오브젝트로 만드는 방법

1. html

2. js

위와 같은 방법으로 만들면 된다

짱편함

개편함

짱짱맨임

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.

append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌

특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을

알아 보도록 하자.

예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄

사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.

혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.

먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때

1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자

여기서 주목할 것은

empty()와 append 이다

기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고

append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.

이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.

제이쿼리에서 foreach문 사용하는 방법

1. 배열 사용

$.each() 함수를 사용하여 배열을 반복문 형태로 사용할 수가 있다.

ex)1

예제 1번과 2번을 실행하면

콘솔창엔 다음과 같은 결과가 동일하게  나온다

2. 맵 사용

맵형식을 가지고 있는 데이터를 사용할땐 key와 value의 쌍으로 사용한다.

ex)2

3. json 형식 데이터 사용

조금 더 나아가서 우리가 흔하게 사용하는 여러개의 오브젝트들이 담긴 배열을 사용할땐 조금만 응용을 하면 된다.

ex)3

위와 같은 방식으로 사용을 할 수 있다.

아주 간단한 방법으로 긴 for문을 사용하지 않고도 간단하게 사용할 수 있는 방법이다.

ajax를 사용해 화면을 전환하거나 페이지를 이동하는 경우

생각치 못했던 문제에 봉착했다

뒤로가기가 안된다는것!!!!!

사이트 내부를 이리저리 왔다갔다 하다 뒤로가기를 눌럿는데 바로 메인으로 점프 해버리는 상황이 발생한 것이다.

그렇다고 전부 갈아 엎어버릴수도 없고 이것저것 찾아보던 와중

해쉬뱅(hashbang) 이라는 것과 Pjax 라는 것을 발견했다

어떻게 사용해야 하는지 이리저리 블로그를 뒤져보고 스택오버플로우를 뒤져봐도

당췌 어떻게 사용해야 하는지 모르다가 클라이언트 쪽의 대리님의 도움으로 어느정도 감이 잡혔다.

그리고 나는 야매개발자 답게 제대로된 해쉬뱅이나 pjax방법을 사용하지 않고 꼼수를 부렸지만

해결은 했다 

먼저 해쉬뱅은 URL에 #! 을 붙여서 (앵커라고 하는것 같다) 사용 하는 방법인데 이해도 못하겠고

URL창이 지저분해 보여 패스하고 

history.pushState를 사용하는 방법을 이용했다.

전자의 경우 어느정도 브라우저에 자유로운 방법이고

후자는 익스플로러 10 이상 버전과 파폭 크롬에서만 동작 하는 방법이다

다행이도 클라이언트가 익스플로러는 최신 버전을 사용한다고 하여 마음 놓고 사용할 수 있었다.

방법은 간단하다!!!

history.pushState(데이터,타이틀,URL);

history.pushState를 사용하는 방법인데 

원래대로 라면 저기에 html데이터라든지 URL을 넣는다는지 하는 방법을 사용하지만

제대로된 사용법을 알기엔 경험과 능력이 미천하여 꼼수를 부렸다

저 히스토리에 데이터 라고 써있는 인자를 

var data = event.originalEvent.state;

이것으로 불러 올 수가 있는데 이 방법을 응용했다

일단 

페이지가 이동하는 이벤트에 

history.pushState(데이터,타이틀,URL); <- 데이터 부분에 Ajax로 요청하는 URL을 넣는다

그러면 페이지를 이동하는 이벤트가 발생할때마다 히스토리에 URL이 쌓이게 된다.

아래 펑션은 브라우져에서 뒤로가기나 앞으로 가기 이벤트가 발생했을때 실행되도록 하는 함수이다

$(window).bind("popstate", function(event) {

    var data = event.originalEvent.state;  // 이부분으로 뒤로가기 할때마다 아까 저장한 히스토리 스택에 쌓인 URL을 불러 온다

    if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

    var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

    else{

    // 히스토리에 정보가 없을경우 메인화면으로 보내준다.

    var url = "/메인화면";    

    $(location).attr('href',url);

    }

아주 간단하게 해결이 되었다!!!!

주의할점은 

if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

     var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

이부분에서 화면이동 하는 펑션으로 보내주는 경우 그 펑션엔

history.pushState(데이터,타이틀,URL);

이게 없어야 한다

이유는 뒤로가기를 했는데 거기다 또 히스토리에 뒤로가기한 URL을 저장해 버려 꼬이는 경우가 생기기 때문이다.

제 포스팅이 도움이 되었나요? 

그렇다면 공감하기 한번 눌러주세요 블로거에게 큰 힘이 됩니다

자바스크립트를 사용하면서 문자열에 데이터를 넣다보면 특수문자 때문에 구글링은 하는 경우가 많다.

이 포스팅을 보는 당신도 바로 그와 같은 경우겠지 

어디서 퍼와서 어딘가에 저장했던 글인데 어디서 퍼온건지 기억이 안나지만 저위에 아이디가 있는걸 보아 저분이 

작성하신 글인거 같다.. 블로그 하기 전에 복사해서 보관하던 건데

혹시나 저분이 이 포스팅을 언짢아 하신다면 바로 내리고 사과하겠습니다.

포스팅이 도움이 되셨다면 마우스를 조금만 움직여서 

공감하기를 눌러주세요 블로거에게 큰 힘이 됩니다~!