728x90
Json형식의 데이터 전달 방법을 사용하는 목적
데이터를 xml로 사용하지 않고 Json의 형식으로 사용하므로써 각 Parameter가 가지고 있는 값을 가독성있게 전달할 수 있고, 전송하는 데이터의 크기를 줄여 불필요한 데이터 소모를 막는다.
Jason을 사용하기 전에 JQuery를 라이브러리를 먼저 아래와 같이 head안에 입력해야 JavaScript의 언어를 사용할 수 있다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>function과 ajax 코드 설명
로그인 페이지부터 설명
<title>로그인 페이지</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript"> //스크립트태그을 사용해 javascript를 text 형식으로 바꿔 주는 형식으로 변환
function login() {
//아래 form의 onsubmit을 통해 login()이라는 함수가 input을 통해 작동되면 전송된 모든 데이터를
var serData = $('#loginForm').serialize();
//serData라는 객체에 loginForm의 form의 모든 데이터에 담는다.
$.ajax({ // 전송된 모든 데이터를 보낼 때 ajax를 사용하며 앞의 달러와 .을 꼭 넣을 것
data : serData, //보낼 데이터는 serData이고
dataType: 'text', //txt 타입으로 보내고
cashe: false, //캐시는 저장하지 않도록 하고
url: '/DemoPractice2_LogInCRUD/login', //데이터를 처리할 url로 데이터전송
success: function(res) { //데이터를 무사히 처리하여 값을 받았다면 res라는 이름으로 데이터 관리
var resObj = JSON.parse(res); //받은 res데이터를 JSON형식으로 parse한다.
if(resObj){ 그 JSON데이터로 받은 값이 true라면
alert('로그인 성공'); //로그인 성공
}
else{
alert('로그인 실패');
}
},
});
return false; //false의 의미는 데이터의 전송, ajax와 상관없이 페이지의 갱신을 막아 다음 페이지로 이동하는 것을 막는다.
}
</script>
</head>
<body>
<form id = "loginForm" action="login" method="post" onsubmit='return login();'>
<input type="hidden" name = "cmd" value = "check">
받은 데이터를 명시되 있는 아래 페이지로 보내서 값을 돌려받는다.
if(cmd.equals("check")) {
String id = request.getParameter("id");
String pw = request.getParameter("pw");
List<UserVO> list = dao.getList(); //데이터 확인해서
boolean result = dao.findinfo(list, id, pw); //그 데이터중 id랑 패스워드가 일치하면 true 반환
request.setAttribute("result", result);
return "/loginResult.jsp";
}
return "";<%@ page contentType="application/json; charset=utf-8" pageEncoding="utf-8"%>
//주의할 점은 contentTypedl json에서 application 형태로 받는 것과
<% boolean result = (Boolean)request.getAttribute("result");
String jsonStr = (String.format("%s",result)); %>
//string형태로 저장해서 result만 아래와 같이 출력한다.
<%=jsonStr %>
위의 값이 true 가 나오면 페이지를 이동하지 않고 알람만 전송해 로그인 기능을 수행한다.
728x90
'국비과정 > 자바스크립트 (JSP & Servlet 포함)' 카테고리의 다른 글
| ajax 이해 안될 때 이걸 참조하자 (0) | 2022.03.08 |
|---|---|
| Java Script의 let과 constants, template literal(backtick 사용) (0) | 2022.03.07 |
| MVC *S 모델을 사용하여 로그인을 구현 (0) | 2022.03.04 |
| JSP request & response & out & ServletContext & Session 메서드들 - 내장객체 (0) | 2022.03.02 |
| JSP & HTML input 입력값 받아서 출력하기 (0) | 2022.03.01 |