장고(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/' 에 대한 값을 추가해주셔야합니다. 

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

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

mouseover:

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

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

mousemove:

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

mouseout:

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

2. css 

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

3. html 

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

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