03_Spring_Mybatis(ajax)
2022. 10. 11. 16:32ㆍ코딩/FRAMEWORK
joinFrm
<%@ 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://code.jquery.com/jquery-3.6.1.js"></script>
</head>
<body>
<form action="/join.do" method="post">
<fieldset>
<legend>회원가입</legend>
아이디 : <input type="text" name="memberId"><span id="idChk"></span><br>
비밀번호 : <input type="password" name="memberPw"><br>
이름 : <input type="text" name="memberName"><br>
전화번호 : <input type="text" name="phone"><br>
이메일 : <input type="text" name="email"><br>
<input type="submit" value="회원가입">
</fieldset>
</form>
<a href="/">메인으로 돌아가기</a>
<script>
$("[name=memberId]").on("change",function(){
const memberId = $(this).val();
$.ajax({
url : "/idCheck.do",
data : {memberId : memberId},
success : function(data){
console.log(data);
if(data == "0"){
$("#idChk").text("사용 가능한 아이디 입니다.");
$("#idChk").css("color","green");
}else{
$("#idChk").text("사용 불 가능한 아이디 입니다.");
$("#idChk").css("color","red");
}
}
});
});
</script>
</body>
</html>기존의 ajax쓰는 방식과 거의 다를게 없다
다만 url에 들어간 주소로 servlet을 만들었었는데
지금의 방식으로는 controller에 작성을 하면된다.
컨트롤러에서
//오직 데이터만을 넘겨주겠다는 명령어 @ResponseBody(비동기요청, 순수하게 데이터만 전송)
@ResponseBody
@RequestMapping(value="/idCheck.do")
public String idCheck(Member m) {
Member member = service.selectOneMember(m);
if(member == null) {
//사용 가능
return "0";
}else {
//사용 불가능
return "1";
}
}
return 에서 주소값을 넘겨 주기때문에
@ResponseBody를 사용하여 비동기요청,순수하게 주소이동이아닌 데이터를 넘기겠다고 알려야한다.
index
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
</head>
<body>
<h1>03_Spring_Mybatis</h1>
<c:choose>
<c:when test="${empty sessionScope.m }">
<form action="/login.do" method="post">
<fieldset>
<legend>로그인</legend>
아이디 : <input type="text" name="memberId"><br>
비밀번호 : <input type="password" name="memberPw"><br>
<input type="submit" value="로그인">
</fieldset>
</form>
<a href="/joinFrm.do">회원가입</a>
<form action="/searchMemberId.do">
아이디 : <input type="text" name="memberId">
<input type="submit" value="조회">
</form>
</c:when>
<c:otherwise>
<!-- sessionScope을 사용 안해도 출력은 되지만
구분이 되지 않기 때문에 세션인지 아닌지 구분하기위해 적어놓는다. -->
<h2>[${sessionScope.m.memberName }]</h2>
<h3><a href="/boardList.do?reqPage=1">게시판</a></h3>
<h3><a href="/selectAllMember.do">전체회원조회</a></h3>
<h3><a href="/logout.do">로그아웃</a></h3>
<h3><a href="/mypage.do">마이페이지</a></h3>
<h3><a href="/deleteMember.do">회원탈퇴</a></h3>
<form action="/searchMemberName.do">
이름:<input type="text" name="memberName">
<input type="submit" value="조회">
</form>
<form action="/searchMember1.do" method="post">
<select name="type">
<option value="id">아이디</option>
<option value="name">이름</option>
</select>
<input type="text" name="keyword">
<input type="submit" name="검색">
</form>
<hr>
<p>아이디만 입력하고 검색하는 경우 아이디로 조회,
이름만 입력하고 검색하는경우 이름으로조회,
둘다입력하고 검색하는 경우 두개 and로 조회
<h3>아이디 or 이름으로 검색</h3>
<form action="/searchMember2.do">
아이디 : <input type="text" name="memberId"><br>
이름 : <input type="text" name="memberName"><br>
<input type="submit" value="검색">
</form>
<h3><a href="/idList.do">전체회원 아이디 목록</a></h3>
<h3><a href="/searchMember4.do">회원 조회4</a></h3>
</c:otherwise>
</c:choose>
<button id="allMemberAjax">전체회원조회(AJAX)</button>
<div id="ajaxResult"></div>
<script>
$("#allMemberAjax").on("click",function(){
$.ajax({
url : "/ajaxAllMember.do",
success : function(data){
const table = $("<table>");
const titleTr = $("<tr>");
//th태그로 동작하라는 의미로 html로 넣어줌
titleTr.html("<th>번호</th><th>아이디</th><th>이름</th><th>전화번호</th>")
table.append(titleTr);
for(let i=0;i<data.length;i++){
const tr = $("<tr>");
tr.append("<td>"+data[i].memberNo+"</td>");
tr.append("<td>"+data[i].memberId+"</td>");
tr.append("<td>"+data[i].memberName+"</td>");
tr.append("<td>"+data[i].phone+"</td>");
table.append(tr);
}
$("#ajaxResult").html(table)
}
});
});
</script>
</body>
</html>ajaxAllMember
@ResponseBody
@RequestMapping(value="/ajaxAllMember.do",produces = "application/json;charset=utf-8")
public String ajaxAllMember() {
//produces = "application/json;charset=uft-8" : 이거 객체 타입이고 한글은 utf-8로 인코딩해서 보내준다는 의미
ArrayList<Member> list = service.selectAllMember();
Gson gson = new Gson();
//착각하지말것 json은 객체타입이 아닌 문자열임
//그런고로 String 타입으로 받음
String result = gson.toJson(list);
System.out.println(result);
return result;
}Gson을 사용하기 위해서는 메이븐 등록을 해야한다.
여기서 Gson은 객체타입으로 넘겨주는 것이 아닌 기~~다란 문자열 로 넘겨주는것이기 때문에 String 문자열 타입으로 받아야 한다.
'코딩 > FRAMEWORK' 카테고리의 다른 글
| 04_Spring_AOP (0) | 2022.10.11 |
|---|---|
| 03_Spring_Mybatis_member_map(trim,collection,CDATA) (0) | 2022.10.09 |
| Mybatis (0) | 2022.10.06 |
| Spring[CRUD] 라이브러리 세팅 (0) | 2022.09.30 |
| SPRING [CRUD] (0) | 2022.09.29 |