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 |