dbData.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>
<style>
td{
width: 150px;
height: 50px;
text-align : center;
}
#addr{
width : 250px;
}
</style>
<script>
const xhr = new XMLHttpRequest();
$(function(){
$('#member').on('click', function(){
//요청
xhr.open("get", "member.jsp", true);
xhr.send()
//응답
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
arr = JSON.parse(this.responseText);
str = "<table border='1'>";
str += "<tr id='title'><td>아이디</td>";
str += "<td>이름</td>";
str += "<td id='addr'>주소</td>";
str += "<td>전화번호</td></tr>";
$.each(arr, function(i, v){
str += "<tr><td>" + arr[i].id + "</td>";
str += "<td>" + v.name + "</td>";
str += "<td>" + v.addr + "</td>";
str += "<td>" + v.tel + "</td></tr>";
})
str += "</table>";
$('#result1').html(str);
$('#title').css('background', 'lightblue');
$('td').css('height', '50px').css('width', '200px');
}
}
})
$('#jqmember').on('click', function(){
$.ajax({
url : 'member.jsp',
type : 'get',
success : function(arr){
str = "<table border='1'>";
str += "<tr class='title'><td>아이디</td>";
str += "<td>이름</td>";
str += "<td id='addr'>주소</td>";
str += "<td>전화번호</td></tr>";
$.each(arr, function(i, v){
str += "<tr><td>" + arr[i].id + "</td>";
str += "<td>" + v.name + "</td>";
str += "<td>" + v.addr + "</td>";
str += "<td>" + v.tel + "</td></tr>";
})
str += "</table>";
$('#result2').html(str);
$('.title').css('background', 'lightgreen');
},
error : function(xhttp){
alert("상태" + xhttp.status)
},
dataType : 'json'
})
})
})
</script>
</head>
<body>
<div class = "box">
<br>
<button id="member" type = "button">MemberList</button>
<div id = "result1"></div>
</div>
<div class = "box">
<br>
<button id="jqmember" type = "button">MemberList(jQuery)</button>
<div id = "result2"></div>
</div>
</body>
</html>member.jsp
<%@page import="java.util.List"%>
<%@page import="kr.or.ddit.ibatis.config.SqlMapClientFactory"%>
<%@page import="com.ibatis.sqlmap.client.SqlMapClient"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
//0. 클라이언트 요청시 전송되는 데이터를 받는다
//1. SqlMapClient객체를 얻는다
SqlMapClient smc = SqlMapClientFactory.getSqlMapClient();
//2. mapper를 수행한다 - select - queryForList(), queryForObject()
List<MemberVO> list = smc.queryForList("mymember.getAllMember");
//3. select 수행한 결과를 가지고 jsonobject배열로 응답 데이터를 생성한다
%>
[
<%
for(int i=0; i<list.size(); i++){
MemberVO vo = list.get(i);
if(i>0) out.print(",");
%>
{
"name" : "<%= vo.getMem_name() %>",
"addr" : "<%= vo.getMem_addr() %>",
"tel" : "<%= vo.getMem_tel() %>",
"id" : "<%= vo.getMem_id() %>"
}
<%
}
%>
]
MemberVO
package kr.or.ddit.member.vo;
/*
* DB테이블에 있는 각 컬럼들을 기준으로 데이터를 객체화할 클래스이다.
*
* DB테이블의 '컬럼명'이 이 VO클래스의 '멤버변수'가 된다.
*
* DB테이블의 컬럼과 클래스의 멤버변수를 매핑해서 사용한다.(서로 맞춰 데이터를 넣어줌)
*
*/
public class MemberVO {
private String mem_id;
private String mem_name;
private String mem_pass;
private String mem_tel;
private String mem_addr;
//VO클래스에 별도의 생성자를 만들었을 때는 반드시
// 기본 생성자도 같이 만들어야 한다.
public void setMem_id(String mem_id) {
this.mem_id = mem_id;
}
public String getMem_id() {
return mem_id;
}
public String getMem_name() {
return mem_name;
}
public void setMem_name(String mem_name) {
this.mem_name = mem_name;
}
public String getMem_pass() {
return mem_pass;
}
public void setMem_pass(String mem_pass) {
this.mem_pass = mem_pass;
}
public String getMem_tel() {
return mem_tel;
}
public void setMem_tel(String mem_tel) {
this.mem_tel = mem_tel;
}
public String getMem_addr() {
return mem_addr;
}
public void setMem_addr(String mem_addr) {
this.mem_addr = mem_addr;
}
}
memberTest.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="mymember">
<select id="getAllMember" resultClass="memberVo">
select * from mymember
</select>
</sqlMap>
신입 개발자 입니다!!!