id로 DB검색하여 결과 출력

MySQL 테이블 생성

ex1.html 복사해서 ex2.html 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX연습</title>
</head>
<body>
<h1>아이디 입력 시 DB검색해 결과 출력</h1>
아이디 입력 : <input type="text">
<button onclick="sendServer();">ID중복체크</button>
<div id="output"></div>
<script>
//입력창
const input = document.querySelector('input[type="text"]');
//출력할 태크
const output = document.getElementById('output');

//AJAX를 사용하기 위한 객체
const request = new XMLHttpRequest(); //ajax 객체 생성


//버튼을 누르면 아래 함수가 실행된다.
	    function sendServer() {
      //버튼을 누르면 ajax로 서버로 http 요청
      let v = input.value;
      let url = "getDB.jsp?id=" + v;  // 서버 요청 주소와 파라미터로 입력한 값을 보냄
      request.open('GET', url, true); //Get메소드, 요청주소 설정
      request.send(); //요청함
      request.onreadystatechange = function () {
    	  //요청단계가 성공적이면 결과를 받음 . 
        if (request.readyState == 4 && request.status == 200) {
          let val = request.responseText; //서버로부터 받은 요청 결과
         // console.log(val);// 콘솔에 확인. 
         output.innerHTML=val;//<br>같은 태그도 같이 출력할 수 있어야함
         input.value = '';
         input.focus();
       }
      }
    }
</script>
</body>
</html>

getDB.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.sql.*" %>
<%@ include file="dbconn.jsp" %>

<%
String id = request.getParameter("id");
if(id==null|| id.trim().equals("")){
	out.print("아이디를 입력해 주세요!");
}else{
PreparedStatement pstmt =null;
ResultSet rs = null;
String sql = "SELECT id, name FROM user WHERE id=?";
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1,Integer.parseInt(id)); // id 값을 넣어서 DB검색
rs = pstmt.executeQuery();

if(rs.next()){
	out.print(rs.getInt(1) + " " + rs.getString(2)+ "유저가 있습니다. ");
} else{
	out.print("사용할 수 없는 아이디!");	
}
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();

}
%>

dbconn.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
	Connection conn = null;
	try{
		String url = "jdbc:mysql://localhost:3306/marketdb?useSSL=false&allowPublicKeyRetrieval=true"; //데이터베이스 주소
		String user = "root";
		String password = "1234";
		
      	//Class.forName("com.mysql.cj.jdbc.Driver");
		conn = DriverManager.getConnection(url, user, password);
		//out.println("데이터베이스 연결 성공!<br>");
		
	}catch(SQLException ex){
		out.println("데이터베이스 연결이 실패했습니다.<br>");
		out.println("SQLException: "+ ex.getMessage());
	}
%>

ID 중복체크 버튼 클릭하지 않더라도 검색창에 입력만 하면 바로 검색되도록 만들기

ex2.html 수정

아이디 입력: input에 onkeyup ="sendServer()" 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX연습</title>
</head>
<body>
<h1>아이디 입력 시 DB검색해 결과 출력</h1>
아이디 입력 : <input onkeyup="sendServer()" type="text">
<button onclick="sendServer()">ID중복체크</button>
<div id="output"></div>
<script>
//입력창
const input = document.querySelector('input[type="text"]');
//출력할 태크
const output = document.getElementById('output');

//AJAX를 사용하기 위한 객체
const request = new XMLHttpRequest(); //ajax 객체 생성


//버튼을 누르면 아래 함수가 실행된다.
	    function sendServer() {
      //버튼을 누르면 ajax로 서버로 http 요청
      let v = input.value;
      let url = "getDB.jsp?id=" + v;  // 서버 요청 주소와 파라미터로 입력한 값을 보냄
      request.open('GET', url, true); //Get메소드, 요청주소 설정
      request.send(); //요청함
      request.onreadystatechange = function () {
    	  //요청단계가 성공적이면 결과를 받음 . 
        if (request.readyState == 4 && request.status == 200) {
          let val = request.responseText; //서버로부터 받은 요청 결과
         // console.log(val);// 콘솔에 확인. 
         output.innerHTML=val;//<br>같은 태그도 같이 출력할 수 있어야함
         input.value = '';
         input.focus();
       }
      }
    }
</script>
</body>

'FRONTEND > 기타' 카테고리의 다른 글

jQuery - event (0)	2023.10.05
jQuery ? (1)	2023.10.05
AJAX로 구구단 출력 (1)	2023.10.04
AJAX를 이용해 서버에서 계산하여 결과 출력하기 (0)	2023.10.04
JSON 란? (0)	2023.10.04

'FRONTEND > 기타' 카테고리의 다른 글

티스토리툴바