728x90
인텔리제이 -> springmybatismini 프로젝트
AJAX로 개인 정보 삭제시키기
- 기본적으로 Ajax 사용에서 datatype을 json으로 받아 올 때는 controller에서 @RestController 어노테이션 선언을 하고 사용해야 한다.
- controller에서 restcontroller선언하기 싫다면, 선언해야하는 메소드에 @responsebody 어노테이션 설정을 한다.
#1 컨트롤러
@GetMapping("/member/deleteme")
@ResponseBody
public void deleteme(@RequestParam String num, HttpSession httpSession) {
String path = httpSession.getServletContext().getRealPath("/membersave");
String photo = memberService.getDataByNum(num).getPhoto();
File file = new File(path+"\\"+photo);
file.delete();
memberService.deleteMember(num);
httpSession.invalidate(); //세션의 모든 데이터 제거.
}- invalidate(); -> attribute 설정 된 세션의 모든 데이터 제거 하는 것
- photo 변수에 num값에 따른 dto들의 값을 받아오는 것 + 그 중에서도 getPhoto()를 통해 photo 값을 가져온다.
Ajax 사용해서 삭제시키기 로직
$("#btndelete").click(function(){
var num = $(this).attr("num");
//alert(num);
var ans = confirm("정말 탈퇴하시겠습니까?")
if(ans) {
$.ajax({
type:"get",
dataType: "html",
url:"deleteme",
data:{"num":num},
success:function() {
alert("정상적으로 삭제되었습니다");
location.reload();
}
})
}
})- 삭제 버튼에 ❗ num=${dto.num} ❗으로 해서 num 값을 부여해주고, 스크립트에서 attr() 함수를 통해서 num값을 직접적으로 불러온다.
- 그리고 기본 Ajax 처리를 해주면, 삭제가 된다.
AJAX를 사용한, 모달창 로그인 로직
@Autowired
MemberService memberService;
@GetMapping("/member/ajaxlogin")
public Map<String,String> loginprocess(@RequestParam String id, @RequestParam String pass, HttpSession httpSession) {
Map<String,String> map = new HashMap<>();
int result = memberService.loginPassCheck(id,pass);
if(result==1) {
httpSession.setMaxInactiveInterval(60*60*8);
httpSession.setAttribute("loginok","yes");
httpSession.setAttribute("myid",id);
MemberDto mdto = memberService.getDataById(id);
httpSession.setAttribute("loginphoto",mdto.getPhoto()); //세션에 사진 저장하기
httpSession.setAttribute("loginname",mdto.getName()); //세션에 사진 저장하기
}
map.put("result",result==1?"success":"fail");
return map;
}- Map<>으로 return 타입을 받는 이유는, 이 메소드를 사용하면 파라미터 타입에서 받아온 변수들을
- map에 담아서 반환시키기 위함이다. Map을 사용하지않아도 상관은 없다.
- 그리고 result라는 변수를 만들어서, loginpassCheck 메소드를 사용해서 값을 저장한다.
- 그리고 조건문으로 result==1 이면은 loginpassCheck 로직에 의해서 id랑 비밀번호 값이 DB에서 일치하면은 true값인 1을 return 한다
- result==1 이므로 아래 httpsession 객체를 사용해, setattribute로 세션에 저장한다\
- 그리고 그 값을 map에 "result"로 담고 return을 한다
- 이 로직을 사용하면은 모달창에서 id,pass 입력시 DB에 있는 id,pass일치 시 로그인을 한다.
모달창을 활용하여 Ajax 로그인 & 로그아웃 로직
<로그인>
$(function(){
$("#btnloginok").click(function (){
var id = $("#loginid").val();
var pass= $("#loginpass").val();
//alert(id +
var root = '${root}';
$.ajax({
type:"get",
url :"/member/ajaxlogin",
dataType:"json",
data:{"id":id, "pass":pass},
success:function(res) {
if(res.result=='fail') {
alert("아이디나 비밀번호가 틀립니다. ")
} else {
location.reload();
}
}
})
})
})- 버튼 클릭(id=btnloginok) 클릭시 이벤트 발생
- var id = $("#loginid").val(); -> id에 value 값을 가져온다.
- 그리고 Ajax 처리를 해준다.
- ajax에서 url은 중간경로를 처리해주어야한다 -> controller 매핑 경로랑 같게 해야한다.
- dataType을 json으로 처리할 때는 컨트롤러에 @responsebody , @RestController를 설정해줘야한다.\
@GetMapping("/member/ajaxlogout")
public void logout(HttpSession httpSession) {
httpSession.invalidate();
}<로그아웃>
$("#btnlogout").click(function(){
$.ajax({
type:"get",
url:"/member/ajaxlogout",
dataType: "html",
success:function (){
location.reload();
}
})
})
})
- invalidate() 메소드를 통해서 모든 세션 제거를 해준다.
- 스크립트에서 url은 mapping 주소와 같게하고 위와 같이 Ajax처리를 해줍니다
Ajax를 사용한 Update
1) mapper 수정
<update id="updateMember" parameterType="memberDto">
update bootmember set name=#{name},hp=#{hp},addr=#{addr},email=#{email} where num=#{num}
</update>2) controller
@PostMapping("/member/update")
@ResponseBody
public MemberDto update(@ModelAttribute MemberDto dto) {
memberService.updateMember(dto); //memberservice는 메소드 생성해둔 클래스의 객체
return dto;
}3) jsp 에서 script주기
$("#btnupdate").click(function() {
var num = $(this).attr("num");
var name = $(".modName").text();
var hp = $(".modhp").text();
var addr = $(".modAddr").text();
var email = $(".modEmail").text();
$(".modName").html("<input type='text' class='modName2' value='"+name+"'>");
$(".modhp").html("<input type='text' class='modHp2' value='"+hp+"'>");
$(".modAddr").html("<input type='text' class='modAddr2' value='"+addr+"'>");
$(".modEmail").html("<input type='text' class='modEmail2' value='"+email+"'>");
$(".buttonMod").html("<button type='submit' class='btn btn-info buttonMod2' num='"+num+"'>수정</button>");
});
$(document).on('click', '.buttonMod2', function() {
var num = $(this).attr("num");
var name = $(".modName2").val();
var hp = $(".modHp2").val();
var addr = $(".modAddr2").val();
var email = $(".modEmail2").val();
//alert(num);
$.ajax({
type: "post",
dataType: "json",
url: "update",
data: {"num":num,"name": name, "hp": hp, "addr": addr, "email": email},
success: function(response) {
alert("수정되었습니다.");
location.reload();
},
error: function(error) {
alert("수정에 실패했습니다.");
}
});
});- id값이 btnupdatefmf 클릭하면 함수가 발생한다
- 위 jsp에서 <input type> 에 class이름을 지정해주고, 그 값을 불러옵니다.
- ex) var name = $(".modName).text();
- 변수를 설정해주고, btnupdate를 클릭하면 이벤트가 발생하게 한다.
- ex) $(".modName").html("<input type='text' class='modName2' value='"+name+"'>");
- ❗ 마지막 버튼에 클래스 이름을 다시 주어야하고, num값을 넘기기 위해서 num 값 설정을 꼭 해야한다
- 다음 이벤트로 두번째 수정으로 바뀐 버튼을 클릭하면 이벤트가 발생하게 한다.
- 그리고 다시 위 수정 된 input type들의 클래스이름을 통해 text 값을 가져온다
- ex) var name = $(".modName2").val();
- 그리고 마지막으로 ajax를 실행시킨다
- ajax에서 data를 보낼 때는 위 설정해둔 num ~ email 까지 다 data에 담아서 보내 줘야한다.
728x90