jsp_아이디중복체크
JSON방식으로 데이터를 받고 파싱하는 방법
|
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
47
48
49
50
51
52
|
package com.koreait.json;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
import org.json.simple.parser.ParseException;
public class JSONTest {
public static void main(String[] args) {
JSONObject in = new JSONObject();
in.put("gender", "남자");
in.put("name", "김자바");
in.put("age", "10");
JSONObject out = new JSONObject();
out.put("in", in);
System.out.println(out.toJSONString());
System.out.println("---------------------------");
String json = out.toJSONString();
JSONParser parser = new JSONParser();
JSONObject p_out = null;
JSONObject p_in = null;
String name = null;
String gender = null;
int age = 0;
try {
p_out = (JSONObject) parser.parse(json);
p_in = (JSONObject) p_out.get("in");
gender = (String) p_in.get("gender");
name = (String) p_in.get("name");
age = Integer.parseInt((String) p_in.get("age"));
System.out.println("성별: " +gender );
System.out.println("이름: " +name );
System.out.println("나이: " +age );
} catch (ParseException e) {
e.printStackTrace();
System.out.println("JSON 파싱오류");
}
}
}
|
cs |
자바에서 프론트 단으로 JSON 타입으로 데이터를 보낼 경우 "in": {"gender" : "남자" , "name" : "김자바", "age" : "10"} 이렇게 묶어서 전송해주어야한다. in이라고 하는 key에 해당하는 value값을 object 전체로 받아오게 하는 것이다.
point1)
JSONObject 라이브러리를 사용하였으며 구글 라이브러리를 사용하여 import해주었다.
https://code.google.com/archive/p/json-simple/downloads
point2)
in이라는 객체에 put을 통해서 key와 value의 값을 동시에 넣어준다.
그리고 out이라는 객체에 아까 모든 배열을 넣은 in을 value로 두어 "in"이라는 key값만 있으면 찾을 수 있게한다. 그러면
콘솔에 우리가 원하는 값이 정상적으로 출력되는 것을 확인할 수 있다.
point3)
parse를 통해 key in과 value값을 먼저 분리해주었으며, in : value(배열..) 을 p_in에 넣어서 p_in.get을 통해 key값으로 각각의 value값을 꺼내오는 코드이다.
parse로 가져오는 경우는 Object타입으로 불러오게되어 JSONObject로 형변환을 시킨 것이고 해당 value값을 담을 gender,name,age는 String,String,Int형이기에 각자의 형에 맞추어 형변환을 해주었다.
그럼 이렇게 syso를 통해서 value값을 받아오는 것을 확인할 수 있다.
실습. 아이디 중복체크
*join_view.jsp
|
1
2
3
4
5
6
7
8
|
<form name="joinForm" method="post" action="join_db.jsp">
<p id="text">사용할 수 있는 아이디입니다.</p> <p>
<label> 아이디 : <input type="text" name="userid"></label>
<input type="button" value="중복확인" onclick="checkId(joinForm.userid.value)">
</p>
</form>
<script src="user.js"></script>
|
cs |
*user.js
|
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
|
function checkId(userid){
/*
* alert(userid);
*/
if(userid == ""){
alert("아이디를 입력해주세요");
return false;
}else{
// ajax통신
let xhr = new XMLHttpRequest();
xhr.open("GET","idcheck.jsp?userid=" + userid,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
if(xhr.responseText.trim() =="ok"){
document.getElementById("text").innerHTML = "사용할 수 있는 아이디입니다.";
}else{
document.getElementById("text").innerHTML = "중복된 아이디입니다.";
}
}
}
}
}
|
cs |
*idcheck.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<%@page import="com.koreait.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String userid = request.getParameter("userid");
MemberDAO mdao = new MemberDAO();
if(!mdao.checkId(userid)){
out.print("ok");
}else{
out.print("no");
}
%>
|
cs |
*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
|
package com.koreait.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.koreait.beans.MemberBean;
public class MemberDAO {
Connection conn;
PreparedStatement pstm;
ResultSet rs;
public boolean checkId(String userid) {
boolean result = false;
String sql = "SELECT count(*) FROM TBL_MEMBER WHERE USERID = ?";
try {
conn = DBConnection.getConnection();
pstm = conn.prepareStatement(sql);
pstm.setString(1, userid);
rs = pstm.executeQuery();
if(rs.next()) {
if(rs.getInt(1) == 1) {
result = true;
}
}
}catch(SQLException e) {
e.printStackTrace();
}
return result;
}
}
|
cs |
point1)
- join_view.jsp : 아이디 입력할 input 태그가 있는 view단의 jsp
- user.js : join_view.jsp와 연결되어있으며 onclick 이벤트로 "중복체크"를 누르면 해당 js파일로 이동된다.
- idcheck.jsp: ajax통신을 위하여 user.js에서 연결한 jsp파일로서 xhr.open("GET","idcheck.jsp?userid=" +userid,true) 로 연결시켰다.
- MemberDao.java: 데이터베이스에서 파라미터로 날라온 userid가 존재하는지에 대한 여부를 확인하는 java파일
point2)
입력된 아이디가 중복인지 아닌지를 확인해야하기때문에 입력한 id값을 파라미터로 가져와야한다. 그래서 joinForm.userid.value를 통해서 파라미터를 넘겨준다.
point3)
보통 해당 데이터가 존재하는지를 확인할 때는 select문을 count(*)로 두어 1과 0을 기준으로 하여 데이터의 유무를 판단한다. 그래서 기존에 했던 것 처럼 MemberDao에서 userid 하나만 파라미터로 받았고(원래 bean을 통해 형식을 정해주는데 여긴 userid 파라미터 하나만 받아오는 것이기에 bean파일이 필요가 없다) rs.next( ) 를 통해서 1인 경우엔 true 0인 경우엔 false를 리턴해준다.
point4)
idcheck.jsp파일로서 Ajax형식으로 해당 데이터의 유무를 확인한다. userid를 파라미터로 가져오고 MemberDao의 checkId 메서드를 불러와 만약 id가 false면(count가 0일경우) ok, 아니면(count가 1일경우) no를 user.js로 데이터를 보내준다.
point5)
trim( ) 은 공백을 제거해주는 메서드이다. 공백으로 인한 오류를 줄어주기에 trim( )메서드를 사용해주는 것이 좋다. responseText.trim( )을 통해 값을 받아오면 되며, 해당 값이 Ok일 경우에는
join_view.jsp 안의 text에 innerHTML을 넣어 "사용할 수 있는 아이디입니다"를 "중복된 아이디입니다."로 바꿀 수 있도록 한다.
