장고(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/' 에 대한 값을 추가해주셔야합니다.
이제 입력 필드에 값이 입력 될 때마다 실시간으로 결과 값이 화면에 출력되는것을 확인 하실 수 있을 겁니다.
'IT 생활 > 프로그래밍' 카테고리의 다른 글
| 젠킨스(Jenkins) /허드슨(hudson) 활용 팁 - 소스 코드 커버리지(Code Coverage) 플러그인 (3) | 2013.12.19 |
|---|---|
| [JQUERY] 동적으로 추가한 컨텐츠를 이벤트 핸들러(마우스 액션)에 등록하기 (0) | 2013.09.30 |
| [Python /파이썬] 이미지 파일에서 문자열 추출하기 - pytesser 라이브러리 사용해서 captcha 우회 하기 (2) | 2013.09.09 |
| [웹개발/ JQuery] 마우스오버(mouseover)시 툴팁(tooltip) 보여주는 기능 (1) | 2013.07.25 |
| [프로그래밍] clang(정적 소스 분석기)과 결과 분석을 위한 scan-build/scan-view 툴 (0) | 2013.05.29 |
