728x90
반응형
<!DOCTYPE html>
<!-- /jquery1/src/main/webapp/jqueryajax/jqueryajax2.html -->
<!--
== 로그인 버튼 클릭시==
1. submit 버튼이 클릭된 경우 id,pass 두개의 값을 ajax2-1.jsp로 전송하기.
2. ajax2-1.jsp 페이지에서 member 테이블을 읽어 id,pass 검증
id,pass 일치 : 반갑습니다. name님 => message 부분에 출력
id,pass 불일치 : 아이디 또는 비밀번호가 틀립니다 => message 부분에 출력
=== 아이디 중복 버튼 클릭시 ====
1. id 파라미터를 ajax2-2.jsp로 전송
id가 존재 : 존재하는 아이디 입니다. => message 부분에 출력
id 입력란을 지우기
id가 존재하지 않으면 : 회원가입을 할 수 있는 아이디 입니다. => message 부분에 출력
-->
<html>
<head>
<meta charset="UTF-8">
<title>ajax를 이용한 로그인</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#submit").click(function(){
// let param = "id=" + $("#id").val() + "&pass=" + $("#pass").val()
let param = {id:$("#id").val(),pass:$("#pass").val()} //json 형태 (가독성이 좋음)
$.ajax({
url : "ajax2-1.jsp",
type : "POST",
data : param,
success: function(data) {
$("#message").html(data)
},
error : function(e) {
alert("서버 오류 :" + e.status)
}
})
return false; //기본이벤트 기능 취소. submit 버튼의 기본 기능 제거
})
$("#btn").click(function(){
$.ajax({
url : "ajax2-2.jsp",
type : "POST",
data : {id:$("#id").val()},
success: function(data) {
$("#message").html(data)
//h1태그의 class속성값이 find?
if($("h1").is(".find")) {
$("#id").val(""); //아이디 입력값을 내용을 지우기 (value값 초기화)
}
},
error : function(e) {
alert("서버 오류 :" + e.status)
}
})
return false;
})
})
</script>
</head>
<body>
<form name="f">
아이디 <input type="text" id="id">
<input type="button" value="아이디중복" id="btn"><br>
비밀번호 <input type="password" id="pass"><br>
<input type="submit" value="로그인" id="submit">
</form>
<div id="message">
</div>
</body>
</html><%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- /jquery1/src/main/webapp/jqueryajax/ajax2-1.jsp -->
<%
request.setCharacterEncoding("utf-8");
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","kic","1234");
String id = request.getParameter("id");
String pass = request.getParameter("pass");
String sql = "select * from member where id = ? and pass = ?";
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1,id);
pstmt.setString(2,pass);
ResultSet rs = pstmt.executeQuery();
if (rs.next()) {
%>
<h1>반갑습니다. <%=rs.getString("name") %>님</h1>
<% } else { %>
<h1><font color="red">아이디 또는 비밀번호가 틀립니다.</font></h1>
<% } %><%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- /jquery1/src/main/webapp/jqueryajax/ajax2-2.jsp -->
<%
request.setCharacterEncoding("utf-8");
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","kic","1234");
String id = request.getParameter("id");
String sql = "select * from member where id = ?";
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1,id);
ResultSet rs = pstmt.executeQuery();
if (rs.next()) {
%>
<h1 class="find">존재하는 아이디입니다.</h1>
<% } else { %>
<h1 class="notfound">회원가입을 할 수 있는 아이디 입니다.</font></h1>
<% } %>728x90
반응형
'study > Ajax' 카테고리의 다른 글
| [Ajax] 23. JSON 연습 ( Ajax폴더의 house.jsp를 이용하여 table 형태로 출력하기) (0) | 2022.04.28 |
|---|---|
| [Ajax] 22. Ajax로 xml 예제2 (0) | 2022.04.28 |
| [Ajax] 23. jquery를 이용한 Ajax연습 (0) | 2022.04.27 |
| [Ajax] 22. Ajax로 xml 예제1 (0) | 2022.04.27 |
| [Ajax] 22. Ajax로 xml, json 분석하기 (0) | 2022.04.27 |