Html lprod_prod
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="../css/public.css">
<style type="text/css">
img{
width: 80% ;
height: 80% ;
}
</style>
<script>
$(function() {
$('input[value=확인]').on('click', function() {
//lprod list를 실행
$.ajax({
url : '/jqpro/LprodList.do', // 맨앞의 / 는 반드시
type : 'post',
success : function(res) {
//$('#lprod').html(res); //dataType이 html일때
// <option>을 생성
code = "";
$.each(res, function(i,v) {
//code += "<option value='P101'>컴퓨터제품</option>";
//code += "<option value='" + P101 + "'>" + 컴퓨터제품 + "</option>";
//code += `<option value='${res[i].lprod_gu}'>${res[i].lprod_nm}</option>`
//code += "<option value='" + v.lprod_gu + "'>" + v.lprod_nm + "</option>";
// code += `<option value='${v.lprod_gu}'>${v.lprod_nm}</option>`
code += `<option value=${v.lprod_gu}>${v.lprod_nm}</option>`
})
$('#lprod').html(code); // 리스트 찍히자마자
//20221004 추가
$('#lprod').trigger('change'); // 자동으로 실행
},
error : function(xhr) {
alert("상태 : " + xhr.status);
},
dataType : 'json'
})//ajax
})//click
// lprod제품을 선택하면 (change하면) prod제품을 출력 - lprod_gu 값을 넘겨서 prod_lgu와 비교
$('#lprod').on('change', function() {
guvalue = $(this).val(); // 내가 메뉴에서 선택하는 픽?
console.log(guvalue)
$.ajax({
url : '/jqpro/ProdList.do',
type : 'post',
//data : "gu=" + guvalue,
data : { "gu" : guvalue },
//위에 3개 돌고! 결과 해서 돌아와요!
success : function(res) {
code = "";
if(res.sw == "ok"){
$.each(res.data, function(i,v) {
code += `<option value=${v.prod_id}>${v.prod_name}</option>`
//v = res.data[i].prod_id / v = res.data[i].prod_name
})
// vimg = "<img src='../images/spongebob.png' alt='spongebob.png'>";
// $('#result1').html(vimg);
}else{
// code += `<option value=0>데이터엄써용오옹</option>` // 데이터 여러번
code = `<option value=0>데이터엄써용오옹</option>` // 어짜피 1번뿐이니까 이거로!
$('#result1').empty(); // 20221004 추가
vimg = "<img src='../images/spongebob.png' alt='spongebob.png'>";
$('#result1').html(vimg);
}
$('#prod').html(code);
// 20221004 추가
$('#prod').trigger('change'); // 자동으로 실행
},
error : function(xhr) {
alert("상태 : " + xhr.status);
},
dataType : 'json'
})
}) //click
// prod제품을 선택하면(change하면) 해당 상품의 detail을 출력
// option - value 값을 가져온다.- prod_id값이다.
$('#prod').on('change', function() {
idvalue = $(this).val(); //prod_id값
if(idvalue != "0") {
$.ajax({
url : '/jqpro/ProdList.do',
type : 'get',
data : { "id" : idvalue },
success : function(res) {
code = "<table class='table table-dark table-striped'>";
code += "<tr><td>PROD_ID</td>";
code += "<td>" + res.id + "</td></tr>";
code += "<tr><td>PROD_NAME</td>";
code += "<td>" + res.name + "</td></tr>";
code += "<tr><td>PROD_LGU</td>";
code += "<td>" + res.lgu + "</td></tr>";
code += "<tr><td>PROD_COST</td>";
code += "<td>" + res.cost + "</td></tr>";
code += "<tr><td>PROD_BUYER</td>";
code += "<td>" + res.buyer + "</td></tr>";
code += "<tr><td>PROD_LINE</td>";
code += "<td>" + res.outline + "</td></tr>";
code += "<tr><td>PROD_PRICE</td>";
code += "<td>" + res.price + "</td></tr>";
code += "<tr><td>PROD_SALE</td>";
code += "<td>" + res.sale + "</td></tr>";
code += "</table>";
$('#result1').html(code);
},
error : function(xhr) {
alert("상태 : " + xhr.status);
},
dataType : 'json'
}) //ajax
}else{ //if
// 데이터 없음일때
// $('#result1').empty(); 이거안지우면 스펀지밥 안나옴.... 생긴걸 지워버림... 눈물
}
}) //click
})// $function
</script>
</head>
<body>
<div>
<h3>
</h3>
<input type="button" value="확인" >
<br><br>
<!-- 셀렉트 부트스트랩 바꿔보기 -->
<div class="form-group">
<label for="lprod">Lprod list:</label>
<select class="form-control" id="lprod">
</select>
<label for="prod">Prod list:</label>
<select class="form-control" id="prod">
</select>
</div>
<br>
<!-- <select id="lprod">
<option value="P101">컴퓨터제품</option>
</select>
<select id="prod">
<option value="P10100001">모니터 19인치122222</option>
</select> -->
<div id="result1"></div>
</div>
</body>
</html>@WebServlet("/LprodList.do")
package kr.or.ddit.lprod.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import kr.or.ddit.lprod.service.ILprodService;
import kr.or.ddit.lprod.service.LprodServiceImpl;
import kr.or.ddit.lprod.vo.LprodVO;
/**
* Servlet implementation class LprodList
*/
@WebServlet("/LprodList.do")
public class LprodList extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LprodList() {
super();
// TODO Auto-generated constructor stub
}
// service만 있거나 doPost만 있거나!!!!!!!!! 둘다 있으면 안됨!!! 하나만 있어야함!
// 서비스일때 만 이거 실행했을때 자료 나옴
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//0. 클라이언트 요청시 전송되는 데이터를 받는다 - 없다.
//1. service객체를 얻는다
ILprodService service = LprodServiceImpl.getService();
// System.out.println("service =====================" + service );
//2. service메소드 호출 - 결과값 받는다.
List<LprodVO> list = service.lprodList();
// System.out.println("list==================" + list);
//------------여기에 만들기 가능!---------------------------------
response.setContentType("application/json; charset=utf-8");
PrintWriter out = response.getWriter();
Gson gson = new Gson();
String result = gson.toJson(list);
out.print(result);
//----------------------------------------------------------
//3. 결과값을 request객체에 저장
request.setAttribute("swsdfsf", list);
//4. view페이지로 이동 - 0930/lprod.jsp
RequestDispatcher disp = request.getRequestDispatcher("0930/lprod.jsp");
disp.forward(request, response);
}
}
lprod.jsp
<%@page import="com.google.gson.Gson"%>
<%@page import="kr.or.ddit.lprod.vo.LprodVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//서블릿에서 저장한 데이터 꺼내기
List<LprodVO> list = (List<LprodVO>)request.getAttribute("swsdfsf");
Gson gson = new Gson();
String result = gson.toJson(list);
out.print(result);
%> @WebServlet("/ProdList.do")
package kr.or.ddit.prod.controller;
import java.io.IOException;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.or.ddit.prod.service.IProdService;
import kr.or.ddit.prod.service.ProdServiceImpl;
import kr.or.ddit.prod.vo.ProdVO;
@WebServlet("/ProdList.do")
public class ProdList extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//ProdDetail
// 0. 클라이언트 요청시 전송되는 값을 받는다 - idvalue(prod_id)
String pid = request.getParameter("id"); //????????????????
// 1. service 객체 얻기
IProdService service = ProdServiceImpl.getService();
// 2. service 메소드 호출 - 결과값 받기
ProdVO vo = service.prodIdByDetail(pid);
// 3. request에 결과값 저장하기
request.setAttribute("hahihuheho", vo);
// 4. view페이지로 이동 - 0930/prodDetail.jsp
request.getRequestDispatcher("0930/prodDetail.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// ProdList
// 0. 클라이언트 요청시 전송되는 값을 받는다
// request.getParameter("gu");
String lgu = request.getParameter("gu");
// 1. service 객체 얻기
IProdService service = ProdServiceImpl.getService();
// 2. service 메소드 호출 - 결과값 받기
List<ProdVO> list = service.selectProdNames(lgu);
// 3. request에 결과값 저장하기
request.setAttribute("swsdfsf", list);
// 4. view페이지로 이동 - 0930/prodList.jsp
request.getRequestDispatcher("0930/prodList.jsp").forward(request, response);
}
}
prodDetail.jsp
<%@page import="kr.or.ddit.prod.vo.ProdVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 서블릿에서 저장된 데이타 꺼내기
ProdVO vo = (ProdVO) request.getAttribute("hahihuheho"); // ProdList.java에 정한 이름으로!
%>
{
"id" : "<%= vo.getProd_id() %>",
"name" : "<%= vo.getProd_name() %>",
"lgu" : "<%= vo.getProd_lgu() %>",
"cost" : "<%= vo.getProd_cost() %>",
"buyer" : "<%= vo.getProd_buyer() %>",
"outline" : "<%= vo.getProd_outline() %>",
"price" : "<%= vo.getProd_price() %>",
"sale" : "<%= vo.getProd_sale() %>"
}prodList.jsp
<%@page import="com.google.gson.JsonElement"%>
<%@page import="com.google.gson.JsonObject"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="kr.or.ddit.prod.vo.ProdVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
List<ProdVO> list = (List<ProdVO>)request.getAttribute("swsdfsf"); // ProdList그이름!
JsonObject obj = new JsonObject();
//list값이 null일 수 도 있고 아닐수도 있다.
if(list != null && list.size() > 0){
//lprod_gu값과 prod_lgu의 갑과 같은 값이 있다.
obj.addProperty("sw", "ok"); //res.sw?????????? // "sw"키라서 뭐든 사용가능
// list를 넣기위해 Gson
Gson gson = new Gson();
JsonElement jse = gson.toJsonTree(list);
obj.add("data", jse); // data배열이야...? res.data[i]prod_id //"data" 키라서 뭐든 사용가능
// Gson gson = new Gson();
// String result = gson.toJson(list);
// out.print(result);
// 이렇게 하면 f12했을때 안되니까!!! 지웠어!
}else{
// 해당 상품이 없다.
obj.addProperty("sw", "no");
}
out.print(obj);
%>
안녕하세요! 초보개발자 공부 시작!