사용자로부터 입력받은 아이디(userid)를 서버로 전송하고, 서버에서 해당 아이디의 로그인 상태를 JSON 형식으로 받아와 화면에 표시하는 기능을 구현.
clientGson.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리 -->
<script>
$(function(){
$("#check").click(function(){
/* 유효성 검증 (제이쿼리방식) */
if($("#userid").val() == 0){
$("#result").text("아이디를 입력하세요.");
return;
}
$.ajax({
url:"./ajaxServerGson1.jsp",
type:"post",
data:{userid:$('#userid').val()},
dataType: 'json',
success:function(data){
alert("성공");
$("#result").text(data.loginid + data.loginsuccess);
},
error: function(err) {
alert("실패 원인 : " + err);
}
});
});
});
</script>
</head>
<body>
<input type = "text" id="userid">
<button type= "button" id="check">Check</button>
<p id ="result"></p>
</body>
</html>유효성 검사:
사용자가 아이디 입력 필드에 값을 입력했는지 확인합니다.
값이 없으면 "아이디를 입력하세요."라는 메시지를 표시하고 Ajax 요청을 중단합니다.
Ajax 요청:
아이디 입력 필드의 값을 서버로 전송합니다.
서버에서 JSON 형식의 응답을 받아서 결과를 화면에 표시합니다.
import="com.google.gson.*" : Gson 라이브러리를 사용하기 위해 필요한 import 문입니다.
-
JsonObject obj = new JsonObject();: Gson의 JsonObject를 사용하여 새로운 JSON 객체를 생성합니다.
-
obj.addProperty("loginid", userid);: JSON 객체에 "loginid"라는 키와 클라이언트로부터 받은 사용자 아이디를 속성으로 추가합니다.
-
obj.addProperty("loginsuccess", message);: JSON 객체에 "loginsuccess"라는 키와 로그인 성공 메시지를 속성으로 추가합니다.
serverGson.jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import ="com.google.gson.*"%>
<%
String userid = request.getParameter("userid");
String message = " 님 로그인 성공 ";
Gson gson = new Gson();
JsonObject obj = new JsonObject();
obj.addProperty("loginid",userid);
obj.addProperty("loginsuccess", message);
out.print(gson.toJson(obj));
%>
비전공자의 개발일기