Ajax 이용해 데이터 베이스 접근

 

<!-- ajax10.jsp -->
<!-- 클라이언트 페이지로 입력받은 데이터를 서버로 보내는 페이지 -->

<button type="button">DB정보 GET</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function(){
        $("button").click(function(){
            $.ajax({
                url : 'dbGet.jsp', //데이터베이스에 접근해 현재페이지로 결과를 뿌려줄 페이지
                mathod : 'post',
                data : {
                    userId : 'hong123' //dbGet.jsp페이지로 데이터를 보냄
                },			
                success : function(item){ //DB접근 후 가져온 데이터
                    console.log($.trim(item)); //jsp페이지 통째로 가져오다보니 공백을 자를 필요가 있음.
                }		
            })
        })
    })	
</script>

<!-- dbGet.jsp -->
<!-- 클라이언트로부터 가져온 데이터를 이용해 DB에 접근하는 페이지 -->

<%@page import="java.util.ArrayList"%>
<%@page import="member.domain.MemberVO"%>
<%@page import="member.persistence.MemberDAO"%>
<%@page import="member.persistence.JDBCUtil"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String userId = request.getParameter("userId"); //ajax10.jsp에서 보내온 데이터
	
    Connection conn = JDBCUtil.getConnection(); //DBCP 이용한 커넥션 생성
    MemberDAO dao = new MemberDAO(conn); //DB 접근객체 생성
	
    out.print(dao.dupId(userId)); // 중복아이디 체크 메서드 중복(flase), 유효(true) 반환
    conn.commit();
    conn.close();
%>

 

---

※

'DB정보 GET' 버튼 클릭시 Ajax를 이용해 doget.jsp 페이지로 'userId' 라는 key, 'hong123'이라는 value를 보내는 것을

확인할 수 있다. 이후 doget.jsp 페이지에서는 dupId() 메소드를 호출해 DB에 접근한뒤 아이디체크를 하고 그 결과를

클라이언트에 응답한다. 위 코드는 응답결과를 콘솔창에 띄우게끔 하였는데 보는것처럼 'false'를 반환했다.

(DB에 아이디가 존재함)