Ajax를 이용한 최근키워드 실시간 DB저장 기능

키워드를 통한 검색시 Ajax를 이용하여 실시간으로 새로고침하지 않고(비동기) DB에 정보를 저장하고, 나중에 다시 로그인 시 DB에서 정보를 가져와서 띄워주는 기능을 구현한다.

 

 

먼저 mainController에서 세션에 저장된 여려가지 유저 정보를 가져온다.

 

 

그리고 UserRepository에 최근 키워드를 가지고 오기 위한 set 메서드 추가

 

 

UserService 객체를 생성해서 saveKeyword 메서드를 작성한다. Controller로부터 id와 keyword를 받아와서, id 를 통해 User 객체를 가져오고, 키워드를 저장한 뒤 레포지토리의 save 메서드를 사용해 update 해준다. 그리고 세션의 user 를 갱신해 준다.

 

 

컨트롤러에서는 해당 Service의 메서드를 호출해 준다. Ajax를 통해 받은 id 와 keyword를 매개변수로 호출하면 된다. 이후 세션에서 last_keyword를 받아와서 뷰로 넘겨준다.

 

 

map.js에서는 saveKeyword 함수를 정의하여 사용한다. saveKeyword에서는 먼저 로그인이 되어 있지 않을 경우(id==undefined) 그냥 함수를 종료한다. 로그인 되어 있을 경우 Ajax를 이용해 id와 keyword를 객체에 담아서 data로 keywordData에 POST 방식으로 전송한다. 이후 전송이 완료되었다면 '최근키워드' 라고 적혀 있던 란을 keyword로 교체하고, 해당 keyword 를 클릭시, focus가 검색창으로 이동되면서 자동으로 keyword가 입력된다.

 

 

main.html에서는 로그인 성공 시(혹은 로그인 상태로 페이지 새로고침 시) 저장되어 있던 키워드를 자동으로 최근검색어 를 대신하여 할당해주는 코드를 작성한다.

 

 

검색 완료 시 성공적으로 검색 옆에 최근검색어가 사용되는 것을 볼 수 있다.

 

오른쪽은 로그아웃 이후이다. 다시 최근키워드로 전환되었다.

 

 

당연히 DB에도 잘 반영이 된다!