장고(Django) 환경의 HTML페이지에서 값을 입력 받아, ajax로 서버로 보내면 json타입으로 결과를 받아 실시간으로 화면에 보여주는 기능에 대한 내용입니다. 

다른 환경이나 언어라 하더라도 내용을 이해하시면 응용해서 쉽게 적용이 가능합니다. 

동작 방식을 그림으로 그려보자면 아래 그림과 같은 구조입니다. 

대략적인 동작 순서는

먼저 HTML페이지에서 입력창을 통해 사용자로 부터 값을 입력 받게 되면 

(1)JQuery에서 입력받은 값을 가지고 서버로 보내기 위한 작업을 진행하고 

(2) Ajax로 서버로 패킷을 전송하게 됩니다. 

이에 대해 서버에서는 결과값으로 보여줄 값에 대한 처리를 진행 한 후 

(3) 데이터를 Json 타입으로 변환하여 응답 패킷을 보냅니다. 

(4) 응답 패킷을 화면에 보여줄 포맷에 맞게 처리 하여 HTML 화면에서 보여주게 됩니다. 

이제, 화면별로 소스코드를 살펴봅시다. 

HTML 페이지 

'input' 태그(tag)를 사용해서 값을 입력 받도록 하고, 입력 받은 값은 'searchword'라는 'id'로 접근 할 수 있도록 해줬습니다. 

'div' 태그의 id값인 'results'는 결과값을 보여주기 위해 사용합니다. 

'searchajax()'는 아래 있는 jquery로 작성한 코드를 호출하는 코드입니다. 

JQuery 파일 

텍스트 입력 필드의 값을 가져와서 값이 존재하면 ajax로 전송하는 코드입니다. 

텍스트 입력 여부는 'keyup()' 함수를 사용해서 판단 할 수 있습니다. 

Ajax는 'POST' 메소드(method)로 보내며 데이터는 키(key) 값을 'searchwords'로 해서 전송합니다. 

성공적으로 전송하고 응답을 받았다면, 'success'에 작성한 것 처럼 값을 html 의 'results' 필드에 넣어주는 작업까지 진행합니다.

장고(Django) 서버 (파이썬)

'POST' 패킷에 대해 'searchwords' 값이 존재하는지 확인 후 원하는 작업을 수행하도록 코드를 작성해주시면 됩니다. 

결과값에 대해서는 json 타입으로 변환 후 응답 패킷을 보내주도록 하면 됩니다. 

물론, 장고의 url 설정에 '/browser/searchData/' 에 대한 값을 추가해주셔야합니다. 

이제 입력 필드에 값이 입력 될 때마다 실시간으로 결과 값이 화면에 출력되는것을 확인 하실 수 있을 겁니다. 

jquery에는 selector에 의해 선택된 항목에 원하는 내용을 추가하는게 가능합니다. 

지원하는 함수는 다음 네 가지가 존재 합니다. 

1. append() : 선택된 엘리먼트(elements)의 맨 뒤에 추가하기 
2. prepend() : 선택된 엘리먼트(elements)의 맨 앞에 추가하기 
3. after() :  선택된 엘리먼트(elements)의 바로 뒤에 추가하기 
4. before() : 선택된 엘리먼트(elements)의 바로 앞에 추가하기 

아래 예제를 봅시다. 

이런 코드를 실행하게 되면 테이블의 값을 클릭할 때 마다 클릭한 행의 바로 아래 'appended row'라는 이름의 행이 하나 추가됩니다. 

위의 그림처럼 '2'를 클릭하면 바로 아래 'appeded row'라는 행이 하나 추가되죠. 

그런데, 'appended row'를 클릭하면 아무런 변화가 없습니다. 

이렇게 동작하기를 기대했다면 더 고민할 필요가 없습니다. 

하지만, 새로 추가된 행에 대해서도 클릭하면 동일한 동작(바로 아래 'appended row'라는 행이 추가)이 수행되기를 기대했다면 추가적인 작업이 필요합니다. 

왜냐하면 동적으로 새롭게 추가된 컨텐츠에 대한 마우스 액션이 등록되어 있지 않기 때문에 아무런 마우스 이벤트가 발생해도 이를 인식하지 못하기 때문입니다. 

그럼 이벤트 핸들러를 등록해 봅시다. 

이렇게 append()로 태그 값을 추가한 후에 태그값에 대해서 이벤트값(마우스 클릭 액션)을 등록하면 됩니다. 

좀전과 동일하게 '2'를 클릭하고, 추가된 'appended row'를 클릭해봅시다. 

이번에는 'appending'이라는 새로운 행이 추가되는것을 확인 할 수 있습니다. 

이제 동적으로 추가한 태그 값에 대해서도 원하는 이벤트를 등록해서 사용하세요~ 

mouseover, mousemove, mouseout 세 가지 액션에 대해 정의해 줍니다. 

mouseover:

현재 마우스가 위치한 곳의 title 속성의 값을 가져와서 보여줍니다. 

마우스의 위치에 따라 툴 팁이 보여지는 위치가 달라지므로 css 함수를 써서 위치 정보를 가져오도록 합니다. 

mousemove:

마우스를 움직일 때 마다 툴 팁이 마우스를 따라 다니도록 마우스의 위치 값을 가져다가 툴 팁의 위치를 업데이트 해줍니다. 

mouseout:

마우스가 링크 정보가 담긴 위치를 벗어 났다면 툴 팁이 보이지 않도록 제거해 줍니다. 

2. css 

툴 팁의 배경 색깔과 폰트 등을 설정해줍니다. 

3. html 

마우스를 가져갔을 때 툴 팁을 보여주기 위한 html입니다.

DJango를 사용하고 있다면 title값은 변수로 넘겨받은 값으로 지정해주는 것도 가능합니다.