IT story/JSP

[JSP 강의] L15JavaScript (L09CheckIdAJAX.jsp)

jason719 2016. 12. 10. 22:15

L15 JAVA SCRIPT

L09CheckIdAJAX 
아이디 중복검사를 AJAX로 해보자


ex) L09CheckIdAJAX.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>아이디 중복체크(AJAX)</title>
</head>
<body>
    <h1>AJAX로 checkId.do를 호출해서 DB에 ID가 있는지 중복체크하자.</h1>
    <form name="checkIdForm">
        <!-- form name은 id와 같은 역할(HTML의 유일한 값) -->
        <input type="text" name="userId" value="admin">
        <button type="button" onclick="checkId(this.form.userId.value)">중복검사</button>
    </form>
    <div id="checkId"></div>
    <script>
        function checkId(userId) {
            //var userIdTest = document.forms["checkIdForm"]["userId"].value;
            //console.log("userIdTest : " + userIdTest);
            console.log(userId);
            var http = new XMLHttpRequest();
            var url = "checkId.do?userId=" + userId;
            http.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    console.log(this.responseText);
                    var checkId = JSON.parse(this.responseText);
                    var msg;
                    if (checkId['checkId']) {
                        msg = '사용중인 아이디입니다.';
                    } else {
                        msg = '사용가능한 아이디입니다.';
                    }
                    document.getElementById("checkId").innerHTML = msg;
                    //받아온 값이 true면 checkId에 사용할 수 없는 id입니다.
                    //받아온 값이 false면 checkId에 사용 가능한 id입니다.
 
                }
            }
            http.open("GET", url, true);
            http.send();
 
        }
    </script>
</body>
</html>
cs


ex) L01CheckId.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.model2.ajax;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.model2.dao.MemberDao;
 
@WebServlet("/checkId.do")
public class L01CheckId extends HttpServlet {
 
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userId = req.getParameter("userId");
        MemberDao dao = MemberDao.getInstance();
        boolean checkId = dao.checkId(userId);
        System.out.println("dao 결과값 :"+checkId);
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json"); // text/html charset=utf-8
        resp.getWriter().append("{\"checkId\":"+checkId+"}");
    }
}
 
cs


ex) MemberDao.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package com.model2.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.model2.util.DBManager;
import com.model2.vo.MemberVo;
public class MemberDao {
    // 쿼리실행!!
    Connection conn = null;
    Statement stmt = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    private static MemberDao instance = new MemberDao();
    // bean과 닮았다.
    public static MemberDao getInstance() {
        return instance;
    }
    public boolean checkId(String userId) {
        String sql = "select id, name, admin from member where id=?";
        boolean checkId = false;
        try {
            conn = DBManager.getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, userId);
            rs = pstmt.executeQuery();
            if (rs.next()) {
                checkId = true;
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            DBManager.close(rs, pstmt, conn);
        }
        return checkId;
    }//checkId
}
cs



※출력내용

중복검사 전 


중복검사 후

※ 출력내용 

중복검사 전

중복검사 후


저작자표시 변경금지

'IT story > JSP' 카테고리의 다른 글

[JSP 강의] L15JavaScript (L08sonAJAX.html)  (0) 2016.12.10
[JSP 강의] L15JavaScript (L07XmlAJAX.html)  (0) 2016.12.10
[JSP 강의] L15JavaScript (L06JSON.html)  (0) 2016.11.18
[JSP 강의] L15JavaScript (L05Function.html)  (0) 2016.11.18
[JSP 강의] L15JavaScript (L04Array.html)  (0) 2016.11.18

'IT story/JSP'의 다른글

  • 현재글[JSP 강의] L15JavaScript (L09CheckIdAJAX.jsp)

관련글

티스토리툴바