반응형
목표
제품명/제품 가격을 selectbox로 만들어 가격은 범위로, 제품명은 일부 단어만 검색해도 결과가 도출되도록한다.
list.jsp
(1) <span> 안에 option 1,2 로 상품명과 가격대를 넣는다.
(2) text 타입으로 값을 받아오고 submit으로 결과를 보낸다.
결과는 form action의 경로 post 메서드로 보내지게 된다.
하지만 form 경로는 비어져있고 , 함수 onchange = a() 때문에 함수에서 form action 의 경로를 정하게 된다.
<h3>전체 상품 목록</h3>
<br />
<a href="/webApp2/product/add"> 상품추가</a>
<form action = "" method = "post" name = "f">
<!-- form action 이 지정한 페이지로 간다. -->
<span>
<select name = "searchType" onchange="a()">
<option value = "1"> 상품명 </option>
<option value = "2"> 가격대 </option>
</select>
</span>
<span id = "searchSpan">
<input type = 'text' name = 'name'>
</span>
<input type = "submit" value = "검색">
</form><br/>
만약 상품명 창이 기본으로 나타나게 하고싶다면
form action 을 이와 같은 경로로 지정해주면 된다.
<form action = "/webApp2/product/getbyname" method = "post" name = "f">
function a()
함수 a에서 1이면 상품명, 1이 아니면 가격대로 검색하도록 지정해주었다.
f.action으로 각각의 경우에 따라 경로를 나누어주었다.
<script>
function a (){
let type = f.searchType.value;
let span = document.getElementById("searchSpan");
let html = "";
if (type == "1"){
html = "<input type = 'text' name = 'name'>";
f.action = "/webApp2/product/getbyname";
// form action 으로 이동, 이름으로 검색하는 url을 폼의 액션 속성의 값 직접 넣어줌 submit 버튼을 누르면 get by name 서블릿으로 이동
} else{
html = "<input type = 'number' name = 'p1'> ~";
html += "<input type = 'number' name = 'p2'>";// 타입
f.action = "/webApp2/product/getbyprice";
// product/getbyprice 로 이동 서블릿
}
span.innerHTML = html;
}
</script>
1) GetByName.java
post 메서드로 보내진 정보는 doGet 을 통해 get으로 보내진다.
한글이 깨졌기 때문에 encoding "UTF-8"을 넣어준다.
새로운 서비스 객체를 만들어 서비스의 getByName 기능을 이용해 이름으로 정보를 받아와 list에 정보를 넣어준다.
다시 list.jsp로 이동한다.
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
ProductService service = new ProductService();
ArrayList<ProductVo> list = service.getByName(name);
request.setAttribute("list", list); //list.jsp 로 이동
RequestDispatcher dis = request.getRequestDispatcher("/product/list.jsp");
dis.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
2) GetByPrice.java
가격을 1,2 두가지로 받고 최소가격, 최대 가격으로 가격 범위 안에 있는 제품의 목록을 나오도록 한다.
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
int price1 = Integer.parseInt(request.getParameter("p1"));
int price2 = Integer.parseInt(request.getParameter("p2"));
ProductService service = new ProductService();
ArrayList<ProductVo> list = service.getByPrice(price1, price2);
request.setAttribute("list", list);
RequestDispatcher dis = request.getRequestDispatcher("/product/list.jsp");
dis.forward(request, response);
}
list.jsp
list.jsp 에서는 list 로 목록을 list 로 받아 변수 vo에 결과들을 다시 도출해 보여준다. -> vo.(변수명)
<c:forEach var="vo" items="${list }">
<tr>
<td>${vo.num }</td>
<td><a href = "/webApp2/product/detail?num=${vo.num }">${vo.name }</a></td>
<td>${vo.price }</td>
<td>${vo.amount }</td>
<td><a href = "/webApp2/product/delete?num=${vo.num }"><input type = "submit" name = "delete" value = "delete"></a></td>
</tr>
</c:forEach>반응형
