웹 기초 26강 - Ajax (Servlet)

public List<BuyerVO> buyerNames()

public BuyerVO buyerDetails(String buyer_id)

url : '/jqpro/BuyerServlet.do',
			type : 'get',
			dataType : 'json', --------- 여기까지가 요청
			error : function(xhr){
				
			},
			success : function(res){
				
			}---------응답
            
            

BuyerVO

package kr.or.ddit.buyer.vo;

public class BuyerVO {
	private String buyer_id      ;
	private String buyer_name    ;
	private String buyer_lgu     ;
	private String buyer_bank    ;
	private String buyer_bankno  ;
	private String buyer_bankname;
	private String buyer_zip     ;
	private String buyer_add1    ;
	private String buyer_add2    ;
	private String buyer_mail    ;
	
	public String getBuyer_id() {
		return buyer_id;
	}
	public void setBuyer_id(String buyer_id) {
		this.buyer_id = buyer_id;
	}
	public String getBuyer_name() {
		return buyer_name;
	}
	public void setBuyer_name(String buyer_name) {
		this.buyer_name = buyer_name;
	}
	public String getBuyer_lgu() {
		return buyer_lgu;
	}
	public void setBuyer_lgu(String buyer_lgu) {
		this.buyer_lgu = buyer_lgu;
	}
	public String getBuyer_bank() {
		return buyer_bank;
	}
	public void setBuyer_bank(String buyer_bank) {
		this.buyer_bank = buyer_bank;
	}
	public String getBuyer_bankno() {
		return buyer_bankno;
	}
	public void setBuyer_bankno(String buyer_bankno) {
		this.buyer_bankno = buyer_bankno;
	}
	public String getBuyer_bankname() {
		return buyer_bankname;
	}
	public void setBuyer_bankname(String buyer_bankname) {
		this.buyer_bankname = buyer_bankname;
	}
	public String getBuyer_zip() {
		return buyer_zip;
	}
	public void setBuyer_zip(String buyer_zip) {
		this.buyer_zip = buyer_zip;
	}
	public String getBuyer_add1() {
		return buyer_add1;
	}
	public void setBuyer_add1(String buyer_add1) {
		this.buyer_add1 = buyer_add1;
	}
	public String getBuyer_add2() {
		return buyer_add2;
	}
	public void setBuyer_add2(String buyer_add2) {
		this.buyer_add2 = buyer_add2;
	}
	public String getBuyer_mail() {
		return buyer_mail;
	}
	public void setBuyer_mail(String buyer_mail) {
		this.buyer_mail = buyer_mail;
	}
	
	
	
}

IBuyerService, IBuyerDao => 인터페이스 생성

BuyerDaoImpl

package kr.or.ddit.buyer.dao;

import java.sql.SQLException;
import java.util.List;

import com.ibatis.sqlmap.client.SqlMapClient;

import kr.or.ddit.buyer.vo.BuyerVO;
import kr.or.ddit.ibatis.config.SqlMapClientFactory;

//mapper실행 - SqlMapClient객체 필요
//자신의 객체를 생성하여 리턴하는 메소드

public class BuyerDaoImpl implements IBuyerDao{

	private SqlMapClient smc;
	private static IBuyerDao dao;
	
	private BuyerDaoImpl(){
		smc = SqlMapClientFactory.getSqlMapClient();
	}
	
	public static IBuyerDao getDaoInstance(){
		if(dao==null) dao = new BuyerDaoImpl();
		return dao;
	}
	
	@Override
	public List<BuyerVO> buyerNames() {
		List<BuyerVO> list = null;
		
		try {
			list = smc.queryForList("buyer.buyerNames");
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
				
		return list;
	}

	@Override
	public BuyerVO buyerDetails(String buyer_id) {
		BuyerVO vo = null;
		
		try {
			vo = (BuyerVO) smc.queryForObject("buyer.buyerDetails", buyer_id);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return vo;
	}

}

BuyerServiceImpl

package kr.or.ddit.buyer.service;

import java.util.List;

import kr.or.ddit.buyer.dao.BuyerDaoImpl;
import kr.or.ddit.buyer.dao.IBuyerDao;
import kr.or.ddit.buyer.vo.BuyerVO;

//dao객체가 필요
//자신의 객체를 생성하여 리턴하는 메소드

public class BuyerServiceImpl implements IBuyerService{

	private IBuyerDao dao;
	private static IBuyerService service;
	
	private BuyerServiceImpl(){
		dao = BuyerDaoImpl.getDaoInstance();
	}
	
	public static IBuyerService getServiceInstance(){
		if(service == null) service = new BuyerServiceImpl();
		return service;
	}
	
	
	@Override
	public List<BuyerVO> buyerNames() {
		//List<BuyerVO> list = null;
		//list = dao.buyerNames();
		return dao.buyerNames();
	}

	@Override
	public BuyerVO buyerDetails(String buyer_id) {
		
		return dao.buyerDetails(buyer_id);
	}

}

buyer.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE sqlMap
	PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
	"http://ibatis.apache.org/dtd/sql-map-2.dtd">
	
<sqlMap namespace="buyer">

	<select id="buyerNames" resultClass="buyerVO">
		select buyer_id, buyer_name from buyer
	</select>
	
	<select id="buyerDetails" resultClass="buyerVO" parameterClass="string">
		select * from buyer where buyer_id = #buyer_id#
	</select>
</sqlMap>

BuyerServlet

package kr.or.ddit.buyer.controller;

import java.io.IOException;
import java.util.List;

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.buyer.service.BuyerServiceImpl;
import kr.or.ddit.buyer.service.IBuyerService;
import kr.or.ddit.buyer.vo.BuyerVO;

/**
 * Servlet implementation class BuyerServlet
 */
@WebServlet("/BuyerServlet.do")
public class BuyerServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public BuyerServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//buyer의 이름과 아이디를 가져오기
		//0. 클라이언트 요청시 전송데이터를 받기 
		
		//1. service객체 얻기
		IBuyerService service = BuyerServiceImpl.getServiceInstance();
		
		//2. service메소드 호출하기 - 결과값 받기 
		List<BuyerVO> list = service.buyerNames();
		
		//3. 결과값을 request에 저장하기
		request.setAttribute("asdf", list);
		
		//4. jsp로 forward
		request.getRequestDispatcher("1202/names.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//id를 매개변수로 하는 buyer의 상세보기를 실행 
		//0. 클라이언트 요청시 전송데이터를 받기 
		String buyerId = request.getParameter("id");
		
		//1. service객체 얻기
		IBuyerService service = BuyerServiceImpl.getServiceInstance();
		
		//2. service메소드 호출하기 - 결과값 받기 
		BuyerVO vo = service.buyerDetails(buyerId);		
		
		//3. 결과값을 request에 저장하기
		request.setAttribute("qwer", vo);
		
		//4. jsp로 forward
		request.getRequestDispatcher("1202/details.jsp").forward(request, response);
	}

}

names.jsp

<%@page import="kr.or.ddit.buyer.vo.BuyerVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<% 
	// 서블릿에서 수행된 값 가져오기
	List<BuyerVO> list = (List<BuyerVO>)request.getAttribute("asdf");
%>

[
	<%
	for(int i=0;i<list.size(); i++){
		BuyerVO vo = list.get(i);
		if(i>0) out.print(",");
		
	%>	
	{
		"id" : "<%= vo.getBuyer_id() %>",
		"name" : "<%= vo.getBuyer_name() %>"
	
	}	
		
	<%	
	}
	%>

]

details.jsp

<%@page import="kr.or.ddit.buyer.vo.BuyerVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
//서블릿에서 저장된 데이터 가져오기

BuyerVO vo = (BuyerVO)request.getAttribute("qwer");
%>
{
	"id"	: "<%= vo.getBuyer_id() %>",
	"name"	: "<%= vo.getBuyer_name() %>",
	"zip"	: "<%= vo.getBuyer_zip() %>",
	"add1"	: "<%= vo.getBuyer_add1() %>",
	"add2"	: "<%= vo.getBuyer_add2() %>",
	"bank"	: "<%= vo.getBuyer_bank() %>",
	"bname" : "<%= vo.getBuyer_bankname() %>",
	"bno"	: "<%= vo.getBuyer_bankno() %>",
	"lgu"	: "<%= vo.getBuyer_lgu() %>",
	"mail"	: "<%= vo.getBuyer_mail() %>"
	



}

buyer.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>

<script>
$(function(){
	$('button').on('click', function(){
		$.ajax({
			url : '/jqpro/BuyerServlet.do',
			type : 'get',
			dataType : 'json',
			error : function(xhr){
				alert("상태: " + xhr.status); //500, 404, 200
				
			},
			success : function(res){
				
				str ="";
				
				$.each(res, function(i, v){
					str = '<p id="' + v.id + '">'+ v.name +'</p>';
					$('#names').append(str);
				})
				
				/* $.each(res, function(i, v){
					str += '<p id="' + v.id + '">'+ v.name +'</p>'
					})//반복문
				
				$('#names').html(str); */
				
			}//success
			
			
		})//ajax
	})//click
	
	
	//bind
	//delegate
	
	//$(document).on('click','p', function(){})
	$('#names').on('click','p', function(){
		//alert($(this).attr('id'));
		
		id = $(this).attr('id');
		
		$.ajax({
			url : '/jqpro/BuyerServlet.do',
			type : 'post',
			data : {"id" : id}, //key : value - servlet에서의 getParameter의 key값
			success : function(res){
				str = "<table>"
				
				str += "<tr><td>BUYER_ID</td>";
				str += "<td>" + res.id + "</td></tr>";
				
				str += "<tr><td>BUYER_NAME</td>";
				str += "<td>" + res.name + "</td></tr>";
				
				str += "<tr><td>BUYER_ZIP</td>";
				str += "<td>" + res.zip + "</td></tr>";
				
				str += "<tr><td>BUYER_ADDR1</td>";
				str += "<td>" + res.add1 + "</td></tr>";
				
				str += "<tr><td>BUYER_ADDR2</td>";
				str += "<td>" + res.add2 + "</td></tr>";
				
				str += "<tr><td>BUYER_BANK</td>";
				str += "<td>" + res.bank + "</td></tr>";
				
				str += "<tr><td>BUYER_BANKNAME</td>";
				str += "<td>" + res.bname + "</td></tr>";
				
				str += "<tr><td>BUYER_BANKNO</td>";
				str += "<td>" + res.bno + "</td></tr>";
				
				str += "<tr><td>BUYER_LGU</td>";
				str += "<td>" + res.lgu + "</td></tr>";
				
				str += "<tr><td>BUYER_MAIL</td>";
				str += "<td>" + res.mail + "</td></tr>";
				
				str += "</table>";
				$('#details').html(str);
			},
			dataType : 'json',
			error : function(xhr){
				alert("상태: " + xhr.status); //500, 404, 200
				
			}
			
		})
	})
})
</script>

<style>
#result1>table{
	border : 1px solid blue;
}

td{
	width: 200px;
	height: 40px;
	padding: 5px;
}
#names{
	height: auto;
}
#details{
	width: 500px;
}

p:hover{
	background: lime;
}

</style>
</head>
<body>

<div class="box">
 
 <br>
  <button type="button">확인</button>
  <div id="result1">
  	<table border='1'>
  		<tr>
  			<td>거래처이름</td>
  			<td>거래처 상세정보</td>
  		</tr>
  		
  		<tr>
  			<td id="names"></td>
  			<td id="details"></td>
  		</tr>
  		
  	</table>
  </div>
 
 </div> 
</body>
</html>