본문 바로가기
Kosta DevOps 과정 280기/Java

jquery와 Ajax

by 롯슈83 2024. 7. 22.

정의

  • 자바스크립트 라이브러리이다
  • 다음의 기능들을 용이하게 한다.
    • DOM 객체 조작
    • 시각적 효과
    • 이벤트 처리
    • Ajax 통신

사전 설정

  • jquery 라이브러리 다운로드하여 연결(로컬 파일 or 링크 걸기)

사용1

  • window.onload = function(){} 대신에 $(function(){});
  • document.querySelector("#btnRead").onclick = function(){} 대신 $("#btnRead").click(function(){})

 

Ajax 와 통신으로 서버로 데이터 전달하기

  • js 의 경우
let request = new XMLHttpRequest();
request.onreadystatechange = function(){
	if(request.readyState == 4){
    	if(request.status == 200){
        	//비동기 형식으로 하되 서버에 응답이 오면 실행해야 하는 코드를 작성
            
            //반복문
            for(let i = 0; i < list.length;i++){
                let row = list[i];
                console.log(row.dname);
                let table = document.createElement("table");
                let td1 = document.createElement("td");
                let txt1 = document.createTextNode(dept.dno);
                td1.appendChild(txt1);
                tr.appendChild(td1);
            }
            
            //input 데이터 가져오기
            let dno = document.querySelector("#dno").value;
        }
    }
}
request.open("get", "listDept.jsp", true);
request.send();

 

  • jquery의 경우
$.ajax({
	url : "listDept.jsp",
    data : 객체,
    success:function(data){
    	//단, 위의 매개변수 data는 그 위의 data와 상관 있지 않다.(이름 바꾸기 가능)
    	//for 대신
        $.each(list, function(i, row){
			let table = $("<table></table>");
            $("<td></td>").html(dept.dno);
            $(tr).append(td1);
            
            //다음과 같이 한번에 가능
            $(tr).append(td1, td2, td3, td4);
        });
         
         //input 데이터 가져오기
         let dno = $("#dno").val();
    }
});
  • 구체적 예시(js는 저번 포스팅에 있으므로 생략)
package com.kosta.vo;

public class MessageVO {
	private String msg;

	public MessageVO(String msg) {
		super();
		this.msg = msg;
	}

	public MessageVO() {
		super();
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}
	
	
}
<!-- insertDept.jsp--> 
<%@page import="com.google.gson.Gson"%>
<%@page import="com.kosta.vo.MessageVO"%>
<%@page import="com.kosta.dao.DeptDAO"%>
<%@page import="com.kosta.vo.DeptVO"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	int dno = Integer.parseInt(request.getParameter("dno"));
	String dname = request.getParameter("dname");
	String dloc = request.getParameter("dloc");
	DeptVO d = new DeptVO(dno, dname, dloc);
	DeptDAO dao = new DeptDAO();
	int re = dao.insert(d);
	MessageVO m = new MessageVO();
	m.setMsg(re+"");
	Gson gson = new Gson();
%>
<%= gson.toJson(m) %>
//메소드 추가
public int insert(DeptVO d) {
		int re = -1;
		String sql = "insert into dept values(?,?,?)";
		try {
			Connection conn = ConnectionProvider.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(sql);
			pstmt.setInt(1, d.getDno());
			pstmt.setString(2, d.getDname());
			pstmt.setString(3, d.getDloc());
			re = pstmt.executeUpdate();
			ConnectionProvider.close(pstmt, conn);
		} catch (Exception e) {
			System.out.println(e);
		}
		return re;
	}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
<script>
	$(function(){
		let loadDept = function(){
			$.ajax({
				url : "listDept_json2.jsp",
			    success:function(data){
			    	//노드 깔끔하게 삭제하기
			    	$("#output").empty();
			    	//data --> 배열
			    	let table = $("<table></table>");
			    	$.each(data, function(i, dept){
			    		//이 안에서 this를 쓰면 여기서 반복문의 요소 하나하나를 받을 수 있다.
			    		//console.log(this.dname);	
			    		//console.log(dept.dname);
			    		
			    		let tr = $("<tr></tr>");
		    			let td1 = $("<td></td>").html(dept.dno);
		    			let td2 = $("<td></td>").html(dept.dname);
		    			let td3 = $("<td></td>").html(dept.dloc);
		    			$(tr).append(td1, td2, td3);
		    			$(table).append(tr);
			    	});
			    	$("#output").append(table);
			    }
			});
		}
		//my_form 의 submit 이 눌러지면 아래 실행
		$("#my_form").submit(function(e){
			let dno = $("#dno").val();
			let dname = $("#dname").val();
			let dloc = $("#dloc").val();
			
			//속성명 : 속성값(아래는 변수)
			let item = {dno:dno, dname:dname, dloc:dloc};
			
			$.ajax({
				url: "insertDept.jsp",
				data:item,
				success:function(r){
					if(r.msg == "1"){
						loadDept();
					}
				}
			});

			//기본 이벤트 제거
			e.preventDefault();
		});
		//btnRead이 눌리면 실행
		$("#btnRead").click(function(){
			loadDept();
		});
	})
</script>
<style>
    table{
        border:1px solid #ddd;
        border-spacing: 0;
        border-collapse: collapse;
    }
    table td{
        border:1px solid #ddd;
    }
</style>
</head>
<body>
    <textarea name="" id=""></textarea>
    <hr>
    <h1>Hello Kosta</h1>
    <button id="btnRead">부서목록 읽어오기</button>
    <hr>
    <div id="output"></div>
	<hr>
    <form id="my_form" action="#">
		<table>
			<tr>
				<td>부서번호</td>
				<td><input type="text" id="dno"></td>
			</tr>
			<tr>
				<td>부서명</td>
				<td><input type="text" id="dname"></td>
			</tr>
			<tr>
				<td>부서위치</td>
				<td><input type="text" id="dloc"></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="reset" value="재입력">
					<input type="submit" value="등록">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

 

노드 삭제하기

  • $(선택자).remove() : 자기 자신을 삭제
  • $(선택자).empty() : 선택자 안에 있는 모든 자식을 모두 삭제

눌러진 tr로부터 자식 노트 td를 찾아달라는 요청

$(this).find("td") //배열을 반환함

 

 

Ajax 로 기본 CRUD 구현

  • dao
package com.kosta.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;

import com.kosta.db.ConnectionProvider;
import com.kosta.vo.DeptVO;

public class DeptDAO {
	public int insert(DeptVO d) {
		int re = -1;
		String sql = "insert into dept values(?,?,?)";
		try {
			Connection conn = ConnectionProvider.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(sql);
			pstmt.setInt(1, d.getDno());
			pstmt.setString(2, d.getDname());
			pstmt.setString(3, d.getDloc());
			re = pstmt.executeUpdate();
			ConnectionProvider.close(pstmt, conn);
		} catch (Exception e) {
			System.out.println(e);
		}
		return re;
	}

	public int update(DeptVO d) {
		int re = -1;
		String sql = "update dept set dname=?, dloc=? where dno=?";
		try {
			Connection conn = ConnectionProvider.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, d.getDname());
			pstmt.setString(2, d.getDloc());
			pstmt.setInt(3, d.getDno());
			re = pstmt.executeUpdate();
			ConnectionProvider.close(pstmt, conn);
		} catch (Exception e) {
			System.out.println(e);
		}
		return re;
	}

	public int delete(int dno) {
		int re = -1;
		String sql = "delete dept where dno=?";
		try {
			Connection conn = ConnectionProvider.getConnection();
			PreparedStatement pstmt = conn.prepareStatement(sql);
			
			pstmt.setInt(1, dno);
			re = pstmt.executeUpdate();
			ConnectionProvider.close(pstmt, conn);
		} catch (Exception e) {
			System.out.println(e);
		}
		return re;
	}
	
	public ArrayList<DeptVO> findAll(){
		ArrayList<DeptVO> list = new ArrayList<>();
		
		try {
			String sql = "select * from dept";
			Connection conn  = ConnectionProvider.getConnection();
			Statement stmt = conn.createStatement();
			ResultSet rs = stmt.executeQuery(sql);
			
			while(rs.next()) {
				list.add(new DeptVO(rs.getInt(1), rs.getString(2), rs.getString(3)));
			}
			ConnectionProvider.close(rs, stmt, conn);
		} catch (Exception e) {
			System.out.println(e);
		}
		
		return list;
	}
}
  • db
package com.kosta.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class ConnectionProvider {	
	public static  Connection getConnection() {
		Connection conn = null;
		String driver = "oracle.jdbc.driver.OracleDriver";
		String url = "jdbc:oracle:thin:@localhost:1521:XE";
		String username = "c##madang";
		String password = "madang";
		try {
			Class.forName(driver);
			conn = DriverManager.getConnection(url, username, password);
		}catch (Exception e) {
			System.out.println("예외발생:"+e.getMessage());
		}	
		return conn;
	}
	
	public static void close(ResultSet rs, Statement stmt, Connection conn) {
		try {
			if(rs != null) {
				rs.close();
			}
			if(stmt != null) {
				stmt.close();
			}
			if(conn != null) {
				conn.close();
			}
		}catch (Exception e) {
			System.out.println("예외발생:"+e.getMessage());
		}
	}
	public static void close(Statement stmt, Connection conn) {
		try {		
			if(stmt != null) {
				stmt.close();
			}
			if(conn != null) {
				conn.close();
			}
		}catch (Exception e) {
			System.out.println("예외발생:"+e.getMessage());
		}
	}
}
  • vo
package com.kosta.vo;

public class DeptVO {
	private int dno;
	private String dname;
	private String dloc;
	
	public DeptVO(int dno, String dname, String dloc) {
		super();
		this.dno = dno;
		this.dname = dname;
		this.dloc = dloc;
	}
	public DeptVO() {
		super();
	}
	public int getDno() {
		return dno;
	}
	public void setDno(int dno) {
		this.dno = dno;
	}
	public String getDname() {
		return dname;
	}
	public void setDname(String dname) {
		this.dname = dname;
	}
	public String getDloc() {
		return dloc;
	}
	public void setDloc(String dloc) {
		this.dloc = dloc;
	}
}
package com.kosta.vo;

public class MessageVO {
	private String msg;

	public MessageVO(String msg) {
		super();
		this.msg = msg;
	}

	public MessageVO() {
		super();
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}
}
  • jsp
<!-- insertDept.jsp-->
<%@page import="com.google.gson.Gson"%>
<%@page import="com.kosta.vo.MessageVO"%>
<%@page import="com.kosta.dao.DeptDAO"%>
<%@page import="com.kosta.vo.DeptVO"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	int dno = Integer.parseInt(request.getParameter("dno"));
	String dname = request.getParameter("dname");
	String dloc = request.getParameter("dloc");
	DeptVO d = new DeptVO(dno, dname, dloc);
	DeptDAO dao = new DeptDAO();
	int re = dao.insert(d);
	MessageVO m = new MessageVO();
	m.setMsg(re+"");
	Gson gson = new Gson();
%>
<%= gson.toJson(m) %>

 

<!-- updateDept.jsp-->
<%@page import="com.google.gson.Gson"%>
<%@page import="com.kosta.vo.MessageVO"%>
<%@page import="com.kosta.dao.DeptDAO"%>
<%@page import="com.kosta.vo.DeptVO"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	int dno = Integer.parseInt(request.getParameter("dno"));
	String dname = request.getParameter("dname");
	String dloc = request.getParameter("dloc");
	DeptVO d = new DeptVO(dno, dname, dloc);
	DeptDAO dao = new DeptDAO();
	int re = dao.update(d);
	MessageVO m = new MessageVO();
	m.setMsg(re+"");
	Gson gson = new Gson();
%>
<%= gson.toJson(m) %>
<!-- deleteDept.jsp --> 
<%@page import="com.google.gson.Gson"%>
<%@page import="com.kosta.vo.MessageVO"%>
<%@page import="com.kosta.dao.DeptDAO"%>
<%@page import="com.kosta.vo.DeptVO"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	int dno = Integer.parseInt(request.getParameter("dno"));
	DeptDAO dao = new DeptDAO();
	int re = dao.delete(dno);
	MessageVO m = new MessageVO();
	m.setMsg(re+"");
	Gson gson = new Gson();
%>
<%= gson.toJson(m) %>
<!-- listDept_json2.jsp-->
<%@page import="com.google.gson.Gson"%>
<%@page import="com.kosta.vo.DeptVO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.kosta.dao.DeptDAO"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//Thread.sleep(5000);
	DeptDAO dao = new DeptDAO();
	ArrayList<DeptVO> list = dao.findAll();
	Gson gson = new Gson();
	String data = gson.toJson(list);
%>
<%= data %>
  • View(html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
<script>
	$(function(){
		//미래에 만들어지는 노드 즉, 동적으로 생성된 노드는 부모에 이벤트를 걸어야한다.
		//다음과 같이 직접 걸 경우 먹지 않는다
		
		$("tr").click(function(){
			//alert("되는지 확인");
		});

		//다음과 같이 원래부터 있는 부모노드에 이벤트를 연결해야 한다.
		//document.on("click", "tr", function(){}); --> thead 도 먹어버림
		//행을 누르면 입력상자에 자동으로 값이 넣어짐
		$("#output").on("click", "tr", function(){
			let tds = $(this).find("td");
			
			
			
			$("#dno").val($(tds[0]).html());
			$("#dname").val($(tds[1]).html());
			$("#dloc").val($(tds[2]).html());

			$("#output tr").removeClass("active");
			$(this).addClass("active");
		});

		$("#output").on("mouseover", "tr", function(){
			$(this).addClass("high_light");
		});
		$("#output").on("mouseleave", "tr", function(){
			$(this).removeClass("high_light");
		});
		


		let loadDept = function(){
			$.ajax({
				url : "listDept_json2.jsp",
			    success:function(data){
			    	$("#output").empty();
			    	
			    	$.each(data, function(i, dept){let tr = $("<tr></tr>");
		    			let td1 = $("<td></td>").html(dept.dno);
		    			let td2 = $("<td></td>").html(dept.dname);
		    			let td3 = $("<td></td>").html(dept.dloc);
		    			$(tr).append(td1, td2, td3);
						$("#output").append(tr);
			    	});
			    }
			});
		}
		
		//등록 버튼이 눌러지면 데이터 등록
		$("#btnAdd").click(function(e){
			let dno = $("#dno").val();
			let dname = $("#dname").val();
			let dloc = $("#dloc").val();
			
			//속성명 : 속성값(아래는 변수)
			let item = {dno:dno, dname:dname, dloc:dloc};
			
			$.ajax({
				url: "insertDept.jsp",
				data:item,
				success:function(r){
					if(r.msg == "1"){
						loadDept();
					}
				}
			});

			//기본 이벤트 제거
			e.preventDefault();
		});

		//수정 버튼이 눌러지면 데이터 수정
		$("#btnUpdate").click(function(e){
			let dno = $("#dno").val();
			let dname = $("#dname").val();
			let dloc = $("#dloc").val();
			
			//속성명 : 속성값(아래는 변수)
			let item = {dno:dno, dname:dname, dloc:dloc};
			
			$.ajax({
				url: "updateDept.jsp",
				data:item,
				success:function(r){
					if(r.msg == "1"){
						loadDept();
					}
				}
			});

			//기본 이벤트 제거
			e.preventDefault();
		});

		//삭제 버튼이 눌러지면 데이터 삭제
		$("#btnDelete").click(function(e){
			if(confirm("정말 삭제?") == false){
				e.preventDefault();
				return false;
			}
			
			let dno = $("#dno").val();
			
			//속성명 : 속성값(아래는 변수)
			let item = {dno:dno};
			
			$.ajax({
				url: "deleteDept.jsp",
				data:item,
				success:function(r){
					if(r.msg == "1"){
						loadDept();
					}
				}
			});

			//기본 이벤트 제거
			e.preventDefault();
		});

		loadDept();
	})
</script>
<style>
    table{
        border:1px solid #ddd;
        border-spacing: 0;
        border-collapse: collapse;
    }
    table td{
        border:1px solid #ddd;
    }
	
	.high_light{
		background: pink;
	}
	.active{
		background: rebeccapurple;
		color:#fff;
	}
</style>
</head>
<body>
    <h1>Hello Kosta</h1>
    <hr>
    <table width="80%">
		<thead>
			<tr>
				<th>부서번호</th>
				<th>부서이름</th>
				<th>부서위치</th>
			</tr>
		</thead>
		<tbody id="output">

		</tbody>
	</table>
	<hr>
    <form id="my_form" action="#">
		<table>
			<tr>
				<td>부서번호</td>
				<td><input type="text" id="dno"></td>
			</tr>
			<tr>
				<td>부서명</td>
				<td><input type="text" id="dname"></td>
			</tr>
			<tr>
				<td>부서위치</td>
				<td><input type="text" id="dloc"></td>
			</tr>
		</table>
	</form>
	<input id="btnAdd" type="button" value="등록">
	<input id="btnUpdate" type="button" value="수정">
	<input id="btnDelete" type="button" value="삭제">
</body>
</html>

 

gson.toJson()

  • 이 내용은 Chat-GPT 의 도움을 받아 작성되었습니다
  •  Gson 라이브러리에서 제공하는 메서드
  • 자바 객체를 JSON 문자열로 변환하는 데 사용
  • 이 메서드는 객체를 JSON 표현으로 직렬화하는 역할을 한다.

 

저작자표시 비영리 변경금지

'Kosta DevOps 과정 280기 > Java' 카테고리의 다른 글

DI 의 필요성  (0) 2024.07.31
스프링 베이직 시작 : 환경설정  (0) 2024.07.31
Ajax 통신  (0) 2024.07.22
세션을 이용한 상태유지  (0) 2024.07.16
프론트 컨트롤러  (0) 2024.07.15

관련글

티스토리툴바