오늘 배운 것
- AJAX 사용해보기
https://generatedata.com/ DB데이터 생성
readystatus 와 status속성 알아보기
- 중복체크 버튼 클릭 시 input태그 안의 Email형식의 text를 DB와 중복체크
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX 연습</title>
</head>
<body>
<h1>회원가입 시 Email 중복 체크</h1>
<form name="myform">
<input type="email" name="email" placeholder="Email 입력해주세요."/>
<input type="button" onclick="sendServer()" value="중복체크"/>
</form>
<div id="output"></div>
<script type="text/javascript">
const input = document.querySelector('input[type="email"]'); // type으로 선택할 떄는 대괄호([])사용
const output = document.getElementById('output');
const request = new XMLHttpRequest(); // ajax request 객체 생성
// input.addEventListener('keyup', sendServer());
function sendServer() {
// 버튼을 누르면 실행되는 함수
let email = input.value; // input에 입력한 값
let url = 'emailcheck.jsp?email=' + email; // 요청할 jsp페이지 주소
request.open('GET', url, true);
request.send();
request.onreadystatechange = getInfo;
}
function getInfo() {
if (request.readyState == 4 && request.status == 200) {
let info = request.responseText; // 요청한 결과 받기
output.textContent = info;
}
};
</script>
</body>
</html><%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String Email = request.getParameter("email");
if (Email.contains("@") && Email.contains(".")) { // Email에 @, . 이 있을 경우
try {
String url = "jdbc:mysql://localhost:3306/demo?useSSL=false";
String sql = "select * from members where email=?";
Connection conn = DriverManager.getConnection(url, "root", "1234");
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, Email);
ResultSet rs = pstmt.executeQuery();
if (rs.next()) {
out.print("이미 가입된 Email이 있습니다.");
} else {
out.print("사용가능한 Email입니다.");
}
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
} else {
out.print("잘못된 Email 형식입니다.");
}
%> 
- textarea에 입력한 text를 DB에 입력하고 DB에 입력된 모든 내용을 div태그 안에 입력하여 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX 연습</title>
<style>
div.box {
margin: 2px;
border: 1px solid pink;
padding: 10px;
background-color: gray;
color: white;
}
</style>
</head>
<body>
<h1>댓글달기 FORM</h1>
<form name="commentform">
<div>댓글 입력 :</div>
<textarea name="comment" rows="5" cols="80" required></textarea>
<div>이메일 입력 :</div>
<input type="email" name="email" placeholder="Email 입력해주세요." />
<br />
<input type="button" onclick="sendServer()" value="댓글달기" />
</form>
<div id="output"></div>
<script type="text/javascript">
const input = document.querySelector('textarea'); // type으로 선택할 떄는 대괄호([])사용
const inputemail = document.querySelector('input[type="email"]');
const output = document.getElementById('output');
const request = new XMLHttpRequest(); // ajax request 객체 생성
// input.addEventListener('keyup', sendServer());
function sendServer() {
// 버튼을 누르면 실행되는 함수
let comment = input.value; // 입력한 댓글
let email = inputemail.value; // 입력한 이메일
let url = 'comment.jsp?comment=' + comment + '&email=' + email; // 요청할 jsp페이지 주소
request.open('GET', url, true);
request.send();
request.onreadystatechange = getInfo;
}
function getInfo() {
if (request.readyState == 4 && request.status == 200) {
let comments = request.responseText; // 요청한 결과 받기
output.innerHTML = comments;
}
}
</script>
</body>
</html>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String Email = request.getParameter("email");
String comment = request.getParameter("comment");
if (comment.trim().equals("") || Email.trim().equals("")) { // Email에 @, . 이 있을 경우
out.print("<p>댓글 내용과 Email을 확인해주세요.");
} else {
try {
String url = "jdbc:mysql://localhost:3306/demo?useSSL=false";
Connection conn = DriverManager.getConnection(url, "root", "1234");
PreparedStatement pstmt = conn.prepareStatement("insert into comment (comment, email) values (?, ?)");
pstmt.setString(1, comment);
pstmt.setString(2, Email);
int i = pstmt.executeUpdate(); // 1일 떄 정상
pstmt = conn.prepareStatement("SELECT * FROM comment ORDER BY id DESC");
ResultSet rs = pstmt.executeQuery();
out.print("<hr>");
out.print("<h2>Comments : </h2>");
while (rs.next()) {
out.print("<div class='box'>");
out.print("<p>" + rs.getString("comment") + "</p>");
out.print("<p><strong>글쓴이 : " + rs.getString("email") + "</strong></p>");
out.print("</div>");
}
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
%> 
