JDBC 활용 연습용2. ( ajax 이용 화면에 정보 바로뿌리기 )

 

 

 

 

 

 

 

  --  member-sql.xml  파일에  select문 추가. 

	<entry key="selectAll">
	SELECT MEMBER_NO , MEMBER_EMAIL , MEMBER_NICK
	FROM MEMBER
	</entry>

 

 

--- index.jsp 파일에 넣을 테이블 추가.

		 <h2> 회원 목록 조회</h2> <br>
               일정 시간 마다 비동기로 회원 목록(회원 번호, 이메일, 닉네임 조회) <br><br>
                	<table border="1">
                	<thead>
                		<tr >
                			<th>회원 번호</th>
                			<th>이메일</th>
                			<th>닉네임</th>
                		</tr>
                	</thead>
                	<tbody id ="tbody">
                    
 					</tbody>
                	</table>

 

-- main.js 파일에  실행함수 추가 .

 

const tbody = document.getElementById("tbody");

function select(){

    $.ajax({
        url: "member/selectAll",
        type: "POST",
        dataType: "JSON", 
        
        success: function(memberList){
     
            tbody.innerHTML="";

            $(memberList).each(function(){
             
            if( this !=null ){

                const tr = document.createElement("tr");

                const td = document.createElement("td");
                td.innerText = this.memberNo;

                const td2 = document.createElement("td");
                td2.innerText = this.memberEmail;

                const td3 = document.createElement("td");
                td3.innerText= this.memberNickname;

                tr.append(td,td2,td3);

                tbody.append(tr);
            }
        });
        },
        error: function(request){
            console.log("AJAX 에러 발생");
            console.log("상태코드 : "+request.status); // 404, 500
        }   
    });
};


setInterval(() => {
    select();
} ,10000 )

window.onload = select


// (function() {
//     select();
//      window.setInterval(select(),1000);
// })();

 

 

 

 

 

-- SelectAllServlet.class   추가  (  /member/selectAll ) 

@WebServlet("/member/selectAll")
public class SelectAllServlet extends HttpServlet{
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		MemberService service = new MemberService();
		
		try {
			List<Member> memberList = service.selectAll();
			
			new Gson().toJson(memberList,resp.getWriter());
			
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

 

-- MemberService.class 추가   .

	public List<Member> selectAll() throws Exception {
		
		Connection conn = getConnection();
		
		List<Member> memberList = dao.selectAll(conn);

		close(conn);
		
		return memberList;
	}
}

 

 

-- MemberDAO.class 추가

	public List<Member> selectAll(Connection conn) throws Exception{
		
		List<Member> memberList = new ArrayList<>();
		
		try {
			String sql = prop.getProperty("selectAll");
			
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			
			while(rs.next()) {
				
				int memberNo = rs.getInt("MEMBER_NO");
				String memberEmail = rs.getString("MEMBER_EMAIL");
				String memberNickname = rs.getString("MEMBER_NICK");
				
            				memberList.add(
                  	 	 new Member(memberNo,memberEmail,memberNickname)
                  					  );
			}
		}finally {
			close(rs);
			close(stmt);
		}
		return memberList;
	}

 

 

 

 

 

 

 

기초 틀 만들어놓고 .

 

-- > main.js  파일 . 

 

-- DB 와 연동되어있기에 , insert , delete 실행시 자동으로 갱신됩니다.