본문 바로가기
Web & Mobile/Linux

Lecture 70 - Linux(8) 클라우드서버 데이터를 이용한 주소 검색

by Bennyziio 2019. 6. 26.
반응형

하나의 기능을 나눠야 하는게 클라우드

웹 서버             각 pc 
                    각 pc  -> 각각의 PC를 연결하는것이 로드밸런서(부하분산) 
                                                    (=L4 switch) 
                    각 pc 
    www.daum.net <_> 1개의 IP매칭되는것이 기본개념 
* 로드밸런싱 

파일 서버           각 pc 
데이터베이스 서버    각 pc  (딴서버와 동시에 접속하지 않음?)
                    분산/병렬(엔터컴퓨팅)

* 서버팜 - 회사내에 전산센터를 없애자는것이 클라우드의 개념(우리회사용자체 클라우드를 생성하는것임)

로드밸런싱(=부하분산)

유사서버생성 - 서버가 복사가 되ㅏ는 것임(다시 세팅하지 않아도 됨)

zipcodeEx01.WebContent.META-INF.context

<?xml version="1.0" encoding="utf-8" ?>
<Context>
	<Resource
		name="jdbc/oracle1"
		auth="Container"
		type="javax.sql.DataSource"
		driverClassName="oracle.jdbc.driver.OracleDriver"
		url="jdbc:oracle:thin:@localhost:1521:orcl"
		username="scott"
		password="tiger"
		maxTotal="20"
		maxWaitMillis="5000"/>
	<Resource
		name="jdbc/mysql"
		auth="Container"
		type="javax.sql.DataSource"
		driverClassName="com.mysql.cj.jdbc.Driver"
		url="jdbc:mysql://106.10.46.19:3306/test?useSSL=false&amp;useTimezone=true&amp;serverTimezone=UTC"
		username="root"
		password="1234"
		maxTotal="20"
		maxWaitMillis="5000"/>
</Context>

ZipcodeEx01/context.xml - resource가 꼭 하나가 아니여도 가능하다 두개이상 이여도 가능

ZipcodeEx01.WebContent.migration

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>

<%
	Connection connOra = null;
	Connection connMy = null;
	PreparedStatement pstmtOra = null;
	PreparedStatement pstmtMy = null;
	ResultSet rsOra = null;
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dsOra = (DataSource)envCtx.lookup("jdbc/oracle1");
		DataSource dsMy = (DataSource)envCtx.lookup("jdbc/mysql");
		connOra = dsOra.getConnection();
		connMy = dsMy.getConnection();
		
		String sql1 = "select * from zipcode";
		String sql2 = "insert into zipcode values (?, ?, ?, ?, ?, ?, ?)";
		pstmtOra = connOra.prepareStatement(sql1);
		pstmtMy = connMy.prepareStatement(sql2);
		
		rsOra = pstmtOra.executeQuery();
		while(rsOra.next()) {
			String seq = rsOra.getString("seq");
			String zipcode = rsOra.getString("zipcode");
			String sido = rsOra.getString("sido");
			String gugun = rsOra.getString("gugun");
			String dong = rsOra.getString("dong");
			String ri = rsOra.getString("ri") == null ? "" : rsOra.getString("ri");
			String bunji = rsOra.getString("bunji") == null ? "" : rsOra.getString("bunji");
			
			pstmtMy.setString(1, zipcode);
			pstmtMy.setString(2, sido);
			pstmtMy.setString(3, gugun);
			pstmtMy.setString(4, dong);
			pstmtMy.setString(5, ri);
			pstmtMy.setString(6, bunji);
			pstmtMy.setString(7, seq);
			
			pstmtMy.executeUpdate();
		}
	} catch (NamingException e) {
		System.out.println("[에러] " + e.getMessage());
	} catch (SQLException e) {
		System.out.println("[에러] " + e.getMessage());
	} finally {
		if(rsOra != null) rsOra.close(); 
		if(pstmtOra != null) pstmtOra.close(); 
		if(pstmtMy != null) pstmtMy.close(); 
		if(connOra != null) connOra.close(); 
		if(connMy != null) connMy.close(); 
	}
%>

오라클 실행해서 이클립스 실행을 하면 오라클 데이터를 select해서 읽어오고 이걸 mysql로 insert를 하는 구문이다. 기다리면 다 들어간다. 우선 오라클에서 zipcode 데이터를 확인해보자

위와 같이 18308개의 데이터가 들어가 있음을 확인할 수 있다.

데이터가 무사히 다 들어왔다.

data폴더를 만들고 json_data.jsp를 만들어준다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<!-- data/json_data.jsp -->
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>

<%
	request.setCharacterEncoding("utf-8");
	
	String strDong = request.getParameter("dong");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	JSONArray jsonArray = new JSONArray();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mysql");
		conn = dataSource.getConnection();
		
		String sql = "select zipcode, sido, gugun, dong, ri, bunji from zipcode where dong like ?";
		pstmt = conn.prepareStatement(sql);
		//pstmt.setString(1, strDong + "%");
		pstmt.setString(1, "신사%");
		
		rs = pstmt.executeQuery();
		
		while(rs.next()) {
			String seq = rs.getString("seq");
			String zipcode = rs.getString("zipcode");
			String sido = rs.getString("sido");
			String gugun = rs.getString("gugun");
			String dong = rs.getString("dong");
			String ri = rs.getString("ri") == null ? "" : rs.getString("ri");
			String bunji = rs.getString("bunji") == null ? "" : rs.getString("bunji");
			
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("seq", seq);
			jsonObject.put("zipcode", zipcode);
			jsonObject.put("sido", sido);
			jsonObject.put("gugun", gugun);
			jsonObject.put("dong", dong);
			jsonObject.put("ri", ri);
			jsonObject.put("bunji", bunji);
			
			jsonArray.add(jsonObject);
		}
	} catch (NamingException e) {
		System.out.println("[에러] " + e.getMessage());
	} catch (SQLException e) {
		System.out.println("[에러] " + e.getMessage());
	} finally {
		if(rs != null) rs.close(); 
		if(pstmt != null) pstmt.close(); 
		if(conn != null) conn.close(); 
	}
	
	out.println(jsonArray);
%>

zipcodeEx01.WebContent.zipcode

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- zipcode.jsp -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		alert('성공');
	});
</script>
</head>

<body>

</body>

</html>

안될때 디버깅시 먼저 확인해야 할 것

결과에 200이면 정상 404등이 나오면 해당 에러코드를 바탕으로 분석을 한다. 라이브러리를 받아오면 200 출력됨. 그래도 안되면 콘솔로 가서 확인

이제 우편번호 검색용으로 수정해보자

zipcodeEx01.WebContent.data.json_data

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<!-- data/json_data.jsp -->
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>

<%
	request.setCharacterEncoding("utf-8");
	
	String strDong = request.getParameter("dong");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	JSONArray jsonArray = new JSONArray();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mysql");
		conn = dataSource.getConnection();
		
		String sql = "select seq, zipcode, sido, gugun, dong, ri, bunji from zipcode where dong like ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, strDong + "%");
		//pstmt.setString(1, "신사%");
		
		rs = pstmt.executeQuery();
		
		while(rs.next()) {
			String seq = rs.getString("seq");
			String zipcode = rs.getString("zipcode");
			String sido = rs.getString("sido");
			String gugun = rs.getString("gugun");
			String dong = rs.getString("dong");
			String ri = rs.getString("ri") == null ? "" : rs.getString("ri");
			String bunji = rs.getString("bunji") == null ? "" : rs.getString("bunji");
			
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("seq", seq);
			jsonObject.put("zipcode", zipcode);
			jsonObject.put("sido", sido);
			jsonObject.put("gugun", gugun);
			jsonObject.put("dong", dong);
			jsonObject.put("ri", ri);
			jsonObject.put("bunji", bunji);
			
			jsonArray.add(jsonObject);
		}
	} catch (NamingException e) {
		System.out.println("[에러] " + e.getMessage());
	} catch (SQLException e) {
		System.out.println("[에러] " + e.getMessage());
	} finally {
		if(rs != null) rs.close(); 
		if(pstmt != null) pstmt.close(); 
		if(conn != null) conn.close(); 
	}
	
	out.println(jsonArray);
%>

pstmt.setString(1, strDong + "%");를 사용하고
//pstmt.setString(1, "신사%");이건 주석하자

zipcodeEx01.WebContent.zipcode

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- zipcode.jsp -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').on('click', function () {
			var searchDong = $('#searchDong').val();
			//alert(searchDong);
			$.ajax({
				url: './data/json_data.jsp',
				data: {
					dong: searchDong
				},
				type: 'post',
				dataType: 'text',
				success: function(data) {
					alert(data);
				},
				error: function() {
					alert('서버 연결 실패');
				}
			});
		});
	});
</script>
</head>

<body>
동이름 : <input type="text" id="searchDong" size="25" maxlength="5" />
&nbsp;
<button id="btn1">우편번호 검색</button>

<br /><hr /><br />

<div id="result"></div>
</body>

</html>

json 타입으로 해서 출력을 해보자. 주의사항으로 <!-- data/json_data.jsp --> 주석부분은 지워줘야 한다 그러지 않으면 json타입으로 읽지 못해서 에러 시퀀스로 빠져버림

zipcodeEx01.WebContent.data.json_data

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>

<%
	request.setCharacterEncoding("utf-8");
	
	String strDong = request.getParameter("dong");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	JSONArray jsonArray = new JSONArray();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mysql");
		conn = dataSource.getConnection();
		
		String sql = "select seq, zipcode, sido, gugun, dong, ri, bunji from zipcode where dong like ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, strDong + "%");
		//pstmt.setString(1, "신사%");
		
		rs = pstmt.executeQuery();
		
		while(rs.next()) {
			String seq = rs.getString("seq");
			String zipcode = rs.getString("zipcode");
			String sido = rs.getString("sido");
			String gugun = rs.getString("gugun");
			String dong = rs.getString("dong");
			String ri = rs.getString("ri") == null ? "" : rs.getString("ri");
			String bunji = rs.getString("bunji") == null ? "" : rs.getString("bunji");
			
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("seq", seq);
			jsonObject.put("zipcode", zipcode);
			jsonObject.put("sido", sido);
			jsonObject.put("gugun", gugun);
			jsonObject.put("dong", dong);
			jsonObject.put("ri", ri);
			jsonObject.put("bunji", bunji);
			jsonArray.add(jsonObject);
		}
	} catch (NamingException e) {
		System.out.println("[에러] " + e.getMessage());
	} catch (SQLException e) {
		System.out.println("[에러] " + e.getMessage());
	} finally {
		if(rs != null) rs.close(); 
		if(pstmt != null) pstmt.close(); 
		if(conn != null) conn.close(); 
	}
	
	out.println(jsonArray);
%>

zipcodeEx01.WebContent.zipcode

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- zipcode.jsp -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').on('click', function() {
			var searchDong = $('#searchDong').val();
			//alert(searchDong);
			$.ajax({
				url: './data/json_data.jsp',
				data: {
					dong: searchDong
				},
				type: 'post',
				//dataType: 'text',
				dataType: 'json',
				success: function(data) {
					//alert(data);
					
					var output = '<table border="1" width="800">';
					$.each(data, function(index, item) {
						output += '<tr seq="' + item.seq + '">';
						output += '	<td>' + item.zipcode + '</td>';
						output += '	<td>' + item.sido + '</td>';
						output += '	<td>' + item.gugun + '</td>';
						output += '	<td>' + item.dong + '</td>';
						output += '	<td>' + item.ri + '</td>';
						output += '	<td>' + item.bunji + '</td>';
						//output += '	<td><input type="text"><button seq="' + item.seq + '">지우기</button></td>'
						output += '</tr>';
					});
					output += '</table>';
					
					$('#result').html(output);
					
					/*
					$('#result button').on('click', function() {
						var seq = $(this).attr("seq");
						var input = $(this).prev().val();
						alert(seq + '/' + input);
					});
					*/
				},
				error: function() {
					alert('서버 연결 실패');
				}
			});
		});
	});
</script>
</head>

<body>
동이름 : <input type="text" id="searchDong" size="25" maxlength="5" >
&nbsp;
<button id="btn1">우편번호 검색</button>

<br /><hr /><br />

<div id="result"></div>
</body>

</html>

출력된 표에서 지우기 버튼을 추가하고 코멘트 작성후 누르면 해당 seq 번호 및 해당 코멘트가 alert로출력되게 하라

zipcodeEx01.WebContent.zipcode

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- zipcode.jsp -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').on('click', function() {
			var searchDong = $('#searchDong').val();
			//alert(searchDong);
			$.ajax({
				url: './data/json_data.jsp',
				data: {
					dong: searchDong
				},
				type: 'post',
				//dataType: 'text',
				dataType: 'json',
				success: function(data) {
					//alert(data);
					
					var output = '<table border="1" width="800">';
					$.each(data, function(index, item) {
						output += '<tr seq="' + item.seq + '">';
						output += '	<td>' + item.zipcode + '</td>';
						output += '	<td>' + item.sido + '</td>';
						output += '	<td>' + item.gugun + '</td>';
						output += '	<td>' + item.dong + '</td>';
						output += '	<td>' + item.ri + '</td>';
						output += '	<td>' + item.bunji + '</td>';
						output += '	<td><input type="text"><button seq="' + item.seq + '">지우기</button></td>'
						output += '</tr>';
					});
					output += '</table>';
					
					$('#result').html(output);
					
					
					$('#result button').on('click', function() {
						var seq = $(this).attr("seq");
						var input = $(this).prev().val();
						alert(seq + '/' + input);
					});
					
				},
				error: function() {
					alert('서버 연결 실패');
				}
			});
		});
	});
</script>
</head>

<body>
동이름 : <input type="text" id="searchDong" size="25" maxlength="5" >
&nbsp;
<button id="btn1">우편번호 검색</button>

<br /><hr /><br />

<div id="result"></div>
</body>

</html>

delete를 하는 구문을 만들어주자

zipcodeEx01.WebContent.data.delete_data

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>

<%
	request.setCharacterEncoding("utf-8");
	
	String strPassword = request.getParameter("password");
	String strSeq = request.getParameter("seq");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	int flag = 2;
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mysql");
		conn = dataSource.getConnection();
		
		String sql = "delete from zipcode where seq = ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, strSeq);
		
		int result = pstmt.executeUpdate();
		if(result == 0) {
			flag = 1;
		} else if(result == 1) {
			flag = 0;
		}
		
	} catch (SQLException e) {
		System.out.println("[에러] " + e.getMessage());
	} finally {
		if(pstmt != null) pstmt.close(); 
		if(conn != null) conn.close(); 
	}
	
	JSONObject jsonObject = new JSONObject();
	jsonObject.put("flag", flag);
	
	out.println(jsonObject);
%>

zipcodeEx01.WebContent.zipcode

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- zipcode.jsp -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').on('click', function() {
			var searchDong = $('#searchDong').val();
			//alert(searchDong);
			$.ajax({
				url: './data/json_data.jsp',
				data: {
					dong: searchDong
				},
				type: 'post',
				//dataType: 'text',
				dataType: 'json',
				success: function(data) {
					//alert(data);
					
					var output = '<table border="1" width="800">';
					$.each(data, function(index, item) {
						output += '<tr seq="' + item.seq + '">';
						output += '	<td>' + item.zipcode + '</td>';
						output += '	<td>' + item.sido + '</td>';
						output += '	<td>' + item.gugun + '</td>';
						output += '	<td>' + item.dong + '</td>';
						output += '	<td>' + item.ri + '</td>';
						output += '	<td>' + item.bunji + '</td>';
						output += '	<td><input type="text"><button seq="' + item.seq + '">지우기</button></td>'
						output += '</tr>';
					});
					output += '</table>';
					
					$('#result').html(output);
					
					$('#result button').on('click', function() {
						var seq = $(this).attr("seq");
						var input = $(this).prev().val();
						//alert(seq + '/' + input);
						$.ajax({
							url: './data/delete_data.jsp',
							data: {
								seq: seq,
								password: input
							},
							type: 'post',
							dataType: 'json',
							success: function (data) {
								if(data.flag == 0) {
									alert('정상 삭제');
								} else {
									alert('서버 에러');
								}
							},
							error: function () {
								alert('서버 연결 실패');
							}
						});
					});
					
				},
				error: function() {
					alert('서버 연결 실패');
				}
			});
		});
	});
</script>
</head>

<body>
동이름 : <input type="text" id="searchDong" size="25" maxlength="5" >
&nbsp;
<button id="btn1">우편번호 검색</button>

<br /><hr /><br />

<div id="result"></div>
</body>

</html>

156-824 seq 3746를 지워보자

3745가 지워졌다. 근데 브라우저에서 지운 행이 사라지질 않았다.
지우는 방법은 DOM으로 지워보자. tr 한줄을 지우면 되는데 이 명령어가 과연 뭘까?

zipcodeEx01.WebContent.zipcode

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- zipcode.jsp -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').on('click', function() {
			var searchDong = $('#searchDong').val();
			//alert(searchDong);
			$.ajax({
				url: './data/json_data.jsp',
				data: {
					dong: searchDong
				},
				type: 'post',
				//dataType: 'text',
				dataType: 'json',
				success: function(data) {
					//alert(data);
					
					var output = '<table border="1" width="800">';
					$.each(data, function(index, item) {
						output += '<tr seq="' + item.seq + '">';
						output += '	<td>' + item.zipcode + '</td>';
						output += '	<td>' + item.sido + '</td>';
						output += '	<td>' + item.gugun + '</td>';
						output += '	<td>' + item.dong + '</td>';
						output += '	<td>' + item.ri + '</td>';
						output += '	<td>' + item.bunji + '</td>';
						output += '	<td><input type="text"><button seq="' + item.seq + '">지우기</button></td>'
						output += '</tr>';
					});
					output += '</table>';
					
					$('#result').html(output);
					
					$('#result button').on('click', function() {
						var seq = $(this).attr("seq");
						var input = $(this).prev().val();
						var thisElement = $(this);
						//alert(seq + '/' + input);
						$.ajax({
							url: './data/delete_data.jsp',
							data: {
								seq: seq,
								password: input
							},
							type: 'post',
							dataType: 'json',
							success: function (data) {
								if(data.flag == 0) {
									alert('정상 삭제');
									thisElement.parent().parent().remove();	
								} else {
									alert('서버 에러');
								}
							},
							error: function () {
								alert('서버 연결 실패');
							}
						});
					});
					
				},
				error: function() {
					alert('서버 연결 실패');
				}
			});
		});
	});
</script>
</head>

<body>
동이름 : <input type="text" id="searchDong" size="25" maxlength="5" >
&nbsp;
<button id="btn1">우편번호 검색</button>

<br /><hr /><br />

<div id="result"></div>
</body>

</html>

var thisElement = $(this);

thisElement.parent().parent().remove();
위를 추가해준다. 부모의 부모를 지워야 하기 때문에 parent().parent()를 하는 것이다.

맨 위 156-827을 지우면

지워졌다.
mariadb에서도 확인해보자

마리아 디비에서 확인해도 지워짐을 확인할 수 있다.

반응형
저작자표시 동일조건

'Web & Mobile > Linux' 카테고리의 다른 글

Lecture 69 - Linux(7) 클라우드서버(네이버 ncloud)  (0) 2019.06.25
Lecture 68 - Linux(6) vsftpd 사용법, Linux에 MariaDB 설치법, Model1 게시판과 연동법  (0) 2019.06.24
Lecture 67 - Linux(5) 네트워크, 원격관리  (0) 2019.06.21
Lecture 66 - Linux(4) RPM 패키지, YUM 패키지, 톰캣 설치법, putty 사용법, vsftp 설치법  (0) 2019.06.20
Lecture 65 - Linux(3) 작업예약, at, crontab  (0) 2019.06.19

관련글

댓글

티스토리툴바