[스프링] 쇼핑몰 - 비동기 검색

[스프링] 쇼핑몰 - 비동기 검색

관리자가 등록한 상품을 사용자가

회원가입 - 로그인 - 상품목록 - 상품내용 - 장바구니 - 주문 의 로직으로 주문을 완료하면

관리자가 다시 주문관리에서 배송 및 취소 등 주문관리를 통해 상품을 판매하고 쇼핑몰을 운영할 수 있도록 구현했다.

이번엔 그 중, 비동기 검색에 관한 포스팅을 작성하려고 한다.

검색은 상품목록 페이지에서 하는 것이 아닌,

상단바에 넣어서 사이트 어느곳이던 검색을 할 수 있도록 했고,

비동기로 처리해서 페이지 새로고침없이,

따로 버튼을 누르지 않고 키워드 입력만으로 검색이 되도록 만들었다.

VO

/* */ public class ItemVO /* */ { /* */ private int item_no; /* */ private String item_admin; /* */ private String item_name; /* */ private String item_price; /* */ private String item_size; /* */ private String item_color; /* */ private int item_disc; /* */ private String item_content; /* */ private String item_imgsub; /* */ private Date item_date; /* */ private int item_star; /* */ private String item_catemain; /* */ private String item_catesub; /* */ private String item_subcontent; /* */ private String item_model; /* */ private String item_imgmain; /* */ private String[] item_option; /* */ private int[] item_vol; /* */ private String option_content; /* */ private String option_item_no; /* */ private int option_vol; /* */ private int option_no; //getter/setter }

Mapper

SELECT ITEM_NO , ITEM_NAME , ITEM_PRICE , ITEM_SIZE, ITEM_COLOR, ITEM_DISC, ITEM_CONTENT , ITEM_IMGMAIN, ITEM_IMGSUB, ITEM_DATE, ITEM_STAR, ITEM_CATEMAIN, ITEM_CATESUB FROM ITEM WHERE ITEM_NAME LIKE '%' || #{keyword} || '%' ORDER BY ITEM_NO DESC

LIKE 문을 이용해서 키워드와 같은 상품이름을 검색한다

Controller

@ResponseBody @RequestMapping(value="/selectList", method=RequestMethod.GET) public List selectList(String keyword)throws Exception{ if(keyword == "") { List list = new ArrayList<>(); return list; } return mainService.selectList(keyword); }

검색어를 매개변수로 받아서, mapper에 넣어주고 값을 리턴해준다

View

function selectList(){ var keyword = document.getElementById('keyword').value; console.log("검색어 들옴?"+keyword); $.ajax({ url : "/main/selectList", type : "get", dataType : "json", data : {"keyword": keyword}, success : function(data){ var s = ''; if(data < 1){ s += '검색결과가 없습니다' ; } $.each(data, function(key,value){ var price = new Intl.NumberFormat('ko-KR', { style : 'currency', currency : 'KRW' }).format(value.item_price); s += ' '; s += ''+value.item_name+' '+value.item_catesub+''; s += ' '+price+' '; s += ''; }) $("#selectView").html(s); } }) };

input창에 입력한 값을 getElementById로 가져와주고,

값을 ajax의 data로 서버로 보낸다.

그 결과값 이용해서 html을 작성하고,

each문으로 list만큼 반복,

$().html 로 보내준다.

상단바의 검색부분

 추천 검색어 COAT PANTS SNIKERS

from http://kimfk567.tistory.com/97 by ccl(A) rewrite - 2021-12-09 18:27:34