AJAX - eclipse,oracle 연동
$(data).lengthDBConnect추가XMLjsonjson parsingjson/eachojdbc11.jaroracle-eclipse 연동xml parsingxml/each설정연동주의사항출력
2
AJAX
목록 보기
4/8
ajax에 ojdbc11.jar추가
AjaxProject -> WEB-INF -> lib에 ojdbc11.jar 추가
DBConnect.java 추가
Java Resources -> src/main/java -> 새패키지 생성 -> DBConnect.java 넣기
import가 제대로 안되어서 오류가 발생하기 때문에 ctrl+shift+o를 눌러서 import 인식 시켜주고 나머지 오류는 자동완성하면 해결
DBConnect
package oracle_db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DBConnect {
static final String ORACLE_URL="jdbc:oracle:thin:@localhost:1521:XE";
//driver
String driver="oracle.jdbc.driver.OracleDriver";
public DBConnect() {
try {
Class.forName(driver);
System.out.println("오라클 드라이버 성공!!!");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("오라클 드라이버 실패!!!");
}
}
//Connection
public Connection getConnection()
{
Connection conn=null;
try {
conn=DriverManager.getConnection(ORACLE_URL, "tjdgus", "1234");
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("오라클 연결 실패: url,계정,비밀번호 확인 요함! "+e.getMessage());
}
return conn;
}
//close메서드..총 4개
//완성구문 2개
public void dbClose(ResultSet rs,Statement stmt,Connection conn)
{
try {
if(rs!=null) rs.close();
if(stmt!=null) stmt.close();
if(conn!=null) conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void dbClose(Statement stmt,Connection conn)
{
try {
if(stmt!=null) stmt.close();
if(conn!=null) conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//미완구문 2개 //preparedstatement 나중에 정의해줌
public void dbClose(ResultSet rs,PreparedStatement pstmt,Connection conn)
{
try {
if(rs!=null) rs.close();
if(pstmt!=null) pstmt.close();
if(conn!=null) conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void dbClose(PreparedStatement pstmt,Connection conn)
{
try {
if(pstmt!=null) pstmt.close();
if(conn!=null) conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
xml/json 복습
btn1 클릭하면 $(data).length 1인 이유
버튼을 클릭하면 요소를 가져와야하는데 가져오는 파일의 갯수가 1개라서 1이 뜬다
$.ajax({
type:"get",
url:"ex01_data1.xml",
datatype:"xml",
success:function(data){
var len=$(data).length; //1개
alert(len);xml여러개 읽기
$(selector).each(function(인덱스,엘리먼트))
xml each문으로 읽기
find("태그이름")
idx는 0부터, ele는 각 태그값,여기서는 stu 각각 ele로 넘어옴
//find("태그이름")
//idx는 0부터, ele는 각 태그값,여기서는 stu 각각 ele로 넘어옴
$(data).find("stu").each(function(idx,ele){
var e=$(ele);
s+="Idx: "+idx+"<br>";
s+="Name: "+e.attr("name")+"<br>";
s+="Java: "+e.find("java").text()+"<br>";
s+="Oracle: "+e.find("oracle").text()+"<br>";
s+="Ajax: "+e.find("ajax").text()+"<br>";
s+="-----------------------------------<br>"
});json each문으로 읽기
//json에서 배열 형태의 여러 개 읽을 경우
//$.each(배열변수,function(인덱스,엘리먼트))
$.each(data,function(idx,ele){
s+="Idx: "+idx+"<br>";
s+="Name: "+ele.name+"<br>";
s+="Hobby: "+ele.hobby+"<br>";
s+="Hp: "+ele.hp+"<br>";
s+="Addr: "+(ele.addr==null?"홈리스":ele.addr)+"<br>";
s+="-----------------------------------------<br>"
});단일 xml
<?xml version="1.0" encoding="UTF-8"?>
<bts>
<name city="경기">장순영</name>
<hp>010-2222-3333</hp>
</bts>단일 json
{
"name":"최성현","hp":"010-4444-5555","score":88
}복수 데이터 xml
<?xml version="1.0" encoding="UTF-8"?>
<sist>
<stu name="lee">
<java>88</java>
<oracle>77</oracle>
<ajax>99</ajax>
</stu>
<stu name="kim">
<java>66</java>
<oracle>100</oracle>
<ajax>55</ajax>
</stu>
<stu name="park">
<java>66</java>
<oracle>89</oracle>
<ajax>79</ajax>
</stu>
</sist>복수 데이터 json
[
{"name":"son","hobby":"study","hp":"010-1234-5678"},
{"name":"lee","hobby":"game","hp":"010-1111-2222","addr":"jeju"},
{"name":"kim","hobby":"travel","hp":"010-3333-4444","addr":"busan"}
]출력 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<button type="button" class="btn btn-info" id="btn1">ex01_data1.xml</button>
<button type="button" class="btn btn-info" id="btn2">ex01_data2.json</button><br><br>
<button type="button" class="btn btn-info" id="btn3">ex01_data3.xml</button>
<button type="button" class="btn btn-info" id="btn4">ex01_data4.json</button>
<br><br>
<div id="result">출력하는 곳</div>
<script type="text/javascript">
$("#btn1").click(function(){
$("#result").empty();
//alert("클릭");
//ajax로 xml읽기
var s=""; //누적용 빈 공간
$.ajax({
type:"get",
url:"ex01_data1.xml",
datatype:"xml",
success:function(data){
var len=$(data).length; //1개
//alert(len);
s="City: "+$(data).find("name").attr("city")+"<br>";
s+="Name: "+$(data).find("name").text()+"<br>";
s+="Hp: "+$(data).find("hp").text();
$("#result").append(s);
}
});
});
$("#btn2").click(function(){
$("#result").empty();
//json읽기
var s="";
$.ajax({
type:"get",
url:"ex01_data2.json",
datatype:"json",
success:function(data){
s+="이름: "+data.name+"<br>";
s+="핸드폰: "+data.hp+"<br>";
s+="점수: "+data.score+"<br>";
$("#result").append(s);
}
});
});
$("#btn3").click(function(){
$("#result").empty();
var s="";
//xml여러개 읽기
//$(selector).each(function(인덱스,엘리먼트))
$.ajax({
type:"get",
url:"ex01_data3.xml",
datatype:"xml",
success:function(data){
//find("태그이름")
//idx는 0부터, ele는 각 태그값,여기서는 stu 각각 ele로 넘어옴
$(data).find("stu").each(function(idx,ele){
var e=$(ele);
s+="Idx: "+idx+"<br>";
s+="Name: "+e.attr("name")+"<br>";
s+="Java: "+e.find("java").text()+"<br>";
s+="Oracle: "+e.find("oracle").text()+"<br>";
s+="Ajax: "+e.find("ajax").text()+"<br>";
s+="-----------------------------------<br>"
});
$("#result").append(s);
}
});
});
$("#btn4").click(function(){
$("#result").empty();
var s="";
$.ajax({
type:"get",
url:"ex01_data4.json",
datatype:"json",
success:function(data){
//json에서 배열 형태의 여러 개 읽을 경우
//$.each(배열변수,function(인덱스,엘리먼트))
$.each(data,function(idx,ele){
s+="Idx: "+idx+"<br>";
s+="Name: "+ele.name+"<br>";
s+="Hobby: "+ele.hobby+"<br>";
s+="Hp: "+ele.hp+"<br>";
s+="Addr: "+(ele.addr==null?"홈리스":ele.addr)+"<br>";
s+="-----------------------------------------<br>"
});
$("#result").append(s);
}
});
});
</script>
</body>
</html>json/xml 여러값 출력 퀴즈
json
[
{"name":"이효리","hobby":["여행","게임"],"addr":"제주도"},
{"name":"이진","hobby":["여행","넷플릭스","코딩"],"addr":"뉴욕"},
{"name":"옥주현","addr":"서울","hp":"010-222-4444"}
]xml
<?xml version="1.0" encoding="UTF-8"?>
<board>
<sawon no="1">
<buseo>교육부</buseo>
<pay sudang="100000">2000000</pay>
</sawon>
<sawon no="2">
<buseo>홍보부</buseo>
<pay sudang="120000">2200000</pay>
</sawon>
<sawon no="3">
<buseo>인사부</buseo>
<pay sudang="150000">2500000</pay>
</sawon>
</board>quiz html 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<button type="button" class="btn btn-success" id="btn1">ex02_quiz.xml</button>
<button type="button" class="btn btn-success" id="btn2">ex02_quiz.json</button>
<div id="result">퀴즈 출력 하실 곳</div>
<script>
$("#btn1").click(function(){
$("#result").empty();
var s="";
$.ajax({
type:"get",
url:"ex02_quiz.xml",
datatype:"xml",
success:function(data){
$(data).find("sawon").each(function(i,d){
s+="No: "+$(d).attr("no")+"<br>";
s+="부서: "+$(d).find("buseo").text()+"<br>";
s+="수당: "+$(d).find("pay").text()+"원<br>";
s+="추가수당: "+$(d).find("pay").attr("sudang")+"원<br>";
s+="--------------------------------<br>";
})
$("#result").append(s);
}
});
});
$("#btn2").click(function(){
$("#result").empty();
var s="";
$.ajax({
type:"get",
url:"ex02_quiz.json",
datatype:"json",
success:function(data){
$.each(data,function(i,ele){
s+="NO: "+(i+1)+"<br>";
s+="이름: "+ele.name+"<br>";
s+="취미: "+(ele.hobby==null?"취미없음":ele.hobby)+"<br>";
//선생님 버전
//s+="Hobby: ";
//if(ele.hobb==null)
//s+="취미없음<br>";
//else
//{
// $.each(data,function(i,h){
// s+="["+h+"]";
// });
//}
s+="주소: "+ele.addr+"<br>";
s+="핸드폰: "+(ele.hp==null?"NOT FIND":ele.hp)+"<br>";
s+="-----------------------------------------<br>";
})
$("#result").append(s);
}
});
});
</script>
</body>
</html>oracle - eclipse 연동
xml parsing
자바형식을 쓸 수 있지만 자바는 아니라 try/catch 직접 해줘야함
출력문(parsing) 작성은 html로 그 외는 java로 작성 (<%%>) 구분
parsing : sqltable을 xml형식으로 바꿔주는 것
parsing부분은 자바형식이 아니라서 닫아줘야함
ajax로 읽어들이기 위해서는 sqltable을 parsing을 해줘서 xml형식으로 바꿔줘야함
필수 입력
<?xml version="1.0" encoding="UTF-8"?>contentType에서 text/html을 text/xml로 변경
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>data의미는 없지만 태그 보고 알기 위해 data라고 함
<data>
</data>그냥 rs.getDate로 쓰면 에러나서 sdf.format으로 받아준다
String writeday=sdf.format(rs.getTimestamp("writeday"));json parsing
위에 입력하면 xml로 인식해서 parsing은 되지만 값을 가져오는 출력은 안됨
<?xml version="1.0" encoding="UTF-8"?>시초값 자체가 json시작의 '[' 표현
String s="[";반복문 끝나고 ']' 닫아줘야함
s+="]";마지막 출력문에 주석 주의 (<!---->)
<!---->으로 주석 달면 parsing한 출력확인에도 같이 들어가서 정상인식이 안되기 때문에 에러남
출력문에 주석달려면 아래 방법으로만 하기
<%-- json,xml 할때 출력창에 주석 안보이게 하기 --%>
<%-- 브라우저 출력 --%>
<%=s%>반복문 마지막 ,(컴마)
마지막 컴마 제거
substring(시작인덱스 번호, 길이-1) 해줘야 반복문 마지막 ',' 제거
s=s.substring(0, s.length()-1);출력값
[{"num":"num","name":"name",...,"age":age,....}]
':'왼쪽값은 json값 입력할때 ""을 문자 그자체로 인식해주기 위해 \추가해서 작성
오른쪽값은 자바문의 문자인식 ""을 표현해주고 안에 값은 getString한 값
int값을 가지는 age는 "\"age\"":age 로 오른쪽 값은 int로 표현해줘야하기에 "" 없음
s+="{";
s+="\"num\":"+num+",\"name\":\""+name+"\",\"hp\":\""+hp;
s+="\",\"age\":"+age+",\"photo\":\""+photo+"\"";
s+="},";oracle sql문
create sequence seq_1;
--info
create table info(num number(5) primary key,
name varchar2(20),
hp varchar2(20),
age number(3),
photo varchar2(100));
insert into info values(seq_1.nextval,'옥동자','010-111-2222',22,'../image/10.png');
insert into info values(seq_1.nextval,'이성신','010-1111-3333',28,'../image/11.png');
insert into info values(seq_1.nextval,'마리','010-2222-4444',25,'../image/12.png');
insert into info values(seq_1.nextval,'둘리','010-3333-4444',23,'../image/13.png');
insert into info values(seq_1.nextval,'짱구','010-2345-3245',5,'../image/14.png');
insert into info values(seq_1.nextval,'윤호석','010-4321-5745',23,'../image/15.png');
commit;
select * from info;
--team
create table team (num number(5) primary key,
name varchar2(20),
addr varchar2(50),
writeday date);
insert into team values(seq_1.nextval,'길동이','서울시 강남구',sysdate);
insert into team values(seq_1.nextval,'길순이','대전광역시',sysdate);
insert into team values(seq_1.nextval,'최성현','부산시 장안구',sysdate);
insert into team values(seq_1.nextval,'이성신','수원시 팔달구',sysdate);
insert into team values(seq_1.nextval,'김영환','전라북도',sysdate);
commit;
select * from team;team to xml parsing jsp파일
<?xml version="1.0" encoding="UTF-8"?>
<%@page import="java.sql.SQLException"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 오라클테이블을 xml로 만들 때 위 주소들 말고는 있으면 안된다/
contentType에서 text/xml로 바꿔줘야한다
여기서 자바를 쓰기 위해 jsp파일로 만들고 xml을 만든다 --%>
<%-- data의미는 없지만 태그 보고 알기 위해 data라고 함 --%>
<data>
<%
DBConnect db=new DBConnect();
Connection conn=db.getConnection();
PreparedStatement pstmt=null;
ResultSet rs=null;
String sql="select * from team order by num";
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-mm-dd");
/* 자바형식을 쓸 수 있지만 자바는 아니라 try/catch 직접 해줘야함 */
try{
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next())
{
String num=rs.getString("num");
String name=rs.getString("name");
String addr=rs.getString("addr");
//그냥 rs.getDate로 쓰면 에러나서 sdf.format으로 받아준다
String writeday=sdf.format(rs.getTimestamp("writeday"));
%>
<%-- parsing : sqltable을 xml형식으로 바꿔주는 것 --%>
<%-- parsing은 자바형식이 아니라서 닫아줘야함 --%>
<%-- ajax로 읽어들이기 위해서는 sqltable을 parsing을 해줘서 xml형식으로 바꿔줘야함 --%>
<team num="<%=num%>">
<name><%=name %></name>
<addr><%=addr %></addr>
<writeday><%=writeday %></writeday>
</team>
<%}
}catch(SQLException e){
}finally{
db.dbClose(rs, pstmt, conn);
}
%>
</data>info to json parsing jsp파일
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/* json parsing */
DBConnect db=new DBConnect();
Connection conn=db.getConnection();
PreparedStatement pstmt=null;
ResultSet rs=null;
String sql="select * from info order by num";
/* 시초값 자체가 json시작의 '[' 표현 */
String s="[";
try{
pstmt=conn.prepareStatement(sql);
rs=pstmt.executeQuery();
while(rs.next())
{
String num=rs.getString("num");
String name=rs.getString("name");
String hp=rs.getString("hp");
String age=rs.getString("age");
String photo=rs.getString("photo");
s+="{";
s+="\"num\":"+num+",\"name\":\""+name+"\",\"hp\":\""+hp;
s+="\",\"age\":"+age+",\"photo\":\""+photo+"\"";
s+="},";
}
//마지막 컴마 제거
//substring(시작인덱스 번호, 길이-1) 해줘야 ',' 제거
s=s.substring(0, s.length()-1);
}catch(SQLException e){
}finally{
db.dbClose(rs, pstmt, conn);
}
s+="]";
%>
<%-- json,xml 할때 출력창에 주석 안보이게 하기 --%>
<%-- 브라우저 출력 --%>
<%=s%>parsing한 xml/json 파일 읽기 (html파일)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style>
#show{
font-family: 'Cute Font';
font-size: 1.5em;
margin-top: 30px;
}
</style>
</head>
<body>
<button type="button" id="btn1" class="btn btn-info">team xml파일 읽어오기</button>
<button type="button" id="btn2" class="btn btn-info">info json파일 읽어오기</button>
<br><br>
<div id="show">파일 읽기</div>
<script>
$("#btn1").click(function(){
$("#show").empty();
var s="";
$.ajax({
type:"get",
url:"ex03_teamtoxml.jsp",
dataType:"xml",
success:function(res){
$(res).find("team").each(function(i,ele){
var n=$(ele);
s+="<div class='alert alert-info'>";
s+="No: "+n.attr("num")+"<br>";
s+="이름: "+n.find("name").text()+"<br>";
s+="주소: "+n.find("addr").text()+"<br>";
s+="작성일: "+n.find("writeday").text()+"<br>";
s+="</div>";
})
$("#show").html(s);
}
});
});
$("#btn2").click(function(){
$("#show").empty();
var s="";
$.ajax({
type:"get",
url:"ex03_infotojson.jsp",
dataType:"json",
success:function(res){
$.each(res,function(i,ele){
s+="Num: "+ele.num+"<br>";
s+="Name: "+ele.name+"<br>";
s+="Hp: "+ele.hp+"<br>";
s+="Age: "+ele.age+"<br>";
s+="Photo: "+"<img src='"+ele.photo+"' width='50'><br>";
})
$("#show").append(s);
}
});
});
</script>
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~