[SPRING] :: AJAX

[SPRING] :: AJAX

AJAX :: 동작 JSP에서 URL, 콜백 함수를 정의하고 CONTROLLER에서 @RESPONSEBODY를 사용하여 결과를 콜백 함수로 리턴하는 방식 :: HTTPREQUEST.JS가 있어야한다 (인터넷 다운) # JSP

//

FUNCTION TEST(F){

VAR URL = "TEST.DO"; // 맵핑 URL

VAR PARAM = "PARM="+F.PARAM.VALUE; // 전송 파라미터

SENDREQUEST(URL, PARAM, 콜백 메소드, "GET 혹은 POST"); // 전송

}

//

FUNCTION 콜백 메소드 ( ){

//

IF(XHR.READY==4 && XHR.STAUTS==200){ // 정상적으로 값 받은 상태

//

VAR DATA = XHR.RESPONSETEXT; // 받은 값

}

}

# CONTROLLER :: AJAX로 요청받은 URL 맵핑의 메소드는 반드시 @RESPONSEBODY 처리해야한다. :: 어노테이션 처리된 메소드는 RETURN 결과를 콜백 메소드로 반환하므로 리턴값은 주소가 아닌 리턴값이여야한다. @REQUESTMAPPING("/TEST.DO")

@RESPONSEBODY

PUBLIC STRING TEST(INT PARAM){

//

INT PARAM = 0;

RETURN PARAM;

} [예시] :: AJAX 사용 # 1 TABLE 준비 TYPE VISIT TABLE CREATE TABLE VISIT(

IDX NUMBER(3,0) PRIMARY KEY,

NAME VARCHAR2(100),

CONTENT VARCHAR2(100),

PWD VARCHAR2(100),

IP VARCHAR2(50),

REGDATE DATE,

FILENAME VARCHAR2(100)

);

# 2 MYBATIS-CONFIG.XML

# 3 CONTEXT-3-DAO.XML

# 4 SERVLET-CONTEXT.XML

# 5 VISITVO.JAVA

package vo; import org.springframework.web.multipart.MultipartFile; public class VisitVO { private int idx; private String name, content, pwd, ip, regdate; // 방명록에 이미지 파일을 추가하기위한 새로운 속성 private MultipartFile photo; private String filename; public MultipartFile getPhoto() { return photo; } public String getFilename() { return filename; } public void setFilename(String filename) { this.filename = filename; } public void setPhoto(MultipartFile photo) { this.photo = photo; } public int getIdx() { return idx; } public void setIdx(int idx) { this.idx = idx; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public String getIp() { return ip; } public void setIp(String ip) { this.ip = ip; } public String getRegdate() { return regdate; } public void setRegdate(String regdate) { this.regdate = regdate; } }

# 6 VISIT.CSS

@charset "UTF-8"; *{margin:0; padding:0;} #main_box{ width:500px; margin:auto; } #main_box > h1{ text-align: center; font-size:20px; margin-top: 10px; margin-bottom: 10px; color:#ffffff; text-shadow: 2px 2px 2px black; } .visit_box{ margin-top: 30px; box-shadow: 2px 2px 2px black; border: 1px solid blue; } .type_content{ min-height: 100px; /* AUTO시 내용만큼 길어지게되며 최대 수치는 100PX이다. */ height: auto; background: #cfdefc; } .type_name{ background: #cfc; } .type_regdate{ background: #ccf; }

# 7 VISIT.XML

select * from visit order by idx desc insert into visit values(seq_visit_idx.nextVal,#{name},#{content},#{pwd},#{ip},sysdate, #{filename}) delete from visit where idx = #{idx} select * from visit where idx = #{idx} update visit set name=#{name}, content=#{content}, pwd=#{pwd}, ip=#{ip}, regdate=sysdate, filename=#{filename} where idx = #{idx}

# 8 VISITDAO.JAVA

package dao; import java.util.List; import org.apache.ibatis.session.SqlSession; import vo.VisitVO; public class VisitDAO { SqlSession sqlSession; public void setSqlSession(SqlSession sqlSession) { this.sqlSession = sqlSession; } // 방명록 리스트 public List selectList(){ List list = sqlSession.selectList("v.visit_list"); return list; } /* 파라미터를 사용하는 메소드 메소드에서 파라미터를 받아 SQLSESSION의 SQL문에 파라미터로 들어가는 변수를 추가한다. 들어가는 파라미터가 다수인 경우 MAP을 사용한다. */ // 방명록 등록 public int insert(VisitVO vo) { // SPRING은 DML작업이 AUTO-COMMIT으로 동작한다. int res = sqlSession.insert("v.visit_insert", vo); return res; } // 방명록 삭제 public int delete(int idx) { int res = sqlSession.delete("v.visit_delete",idx); return res; } // 방명록 특정 글 검색 public VisitVO selectOne(int idx) { VisitVO vo = sqlSession.selectOne("v.visit_selectone", idx); return vo; } // 방명록 수정 public int update(VisitVO vo) { int res = sqlSession.update("v.visit_update", vo); return res; } }

# 9 VISITCONTROLLER.JAVA :: REDIRECT는 컨트롤러가 가지고있는 다른 메소드를 바로 호출하는 키워드이다. :: 맵핑 처리 후 컨트롤러 내에 있는 타 맵핑 주소로 이동하고자하는 경우 사용한다.

package com.korea.vs; import java.io.File; import java.io.IOException; import java.util.List; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import dao.VisitDAO; import util.Util; import vo.VisitVO; @Controller public class VisitController { @Autowired HttpServletRequest request; @Autowired ServletContext application; VisitDAO visit_dao; public void setVisit_dao(VisitDAO visit_dao) { this.visit_dao = visit_dao; } // 방명록 리스트 @RequestMapping(value= {"/","/list.do"}) public String list(Model model) { List list = visit_dao.selectList(); model.addAttribute("list",list); return Util.Visit.VIEW_PATH + "visit_list.jsp"; } // 방명록 입력폼 이동 (변수등을 가져가야하는 상황을 고려하여 생성) @RequestMapping("/insert_form.do") public String insert_form() { return Util.Visit.VIEW_PATH + "visit_insert_form.jsp"; } // 방명록 글 등록 @RequestMapping("/insert.do") public String insert(VisitVO vo) throws IllegalStateException, IOException { // IP String ip = request.getRemoteAddr(); vo.setIp(ip); // 절대 경로 설정 String webPath = "/resources/upload/"; String savePath = application.getRealPath(webPath); System.out.println(savePath); // 업로드된 파일 정보 가져오기 MultipartFile photo = vo.getPhoto(); String filename = "no_file"; if(!photo.isEmpty()) { filename = photo.getOriginalFilename(); File saveFile = new File(savePath, filename); if(!saveFile.exists()) { saveFile.mkdirs(); }else { long time = System.currentTimeMillis(); filename = String.format("%d_%s", time,filename); saveFile = new File(savePath, filename); } photo.transferTo(saveFile); } vo.setFilename(filename); int res = visit_dao.insert(vo); /* REDIRECT 컴퓨터가 가지고있는 또다른 메소드를 바로 호출하게 하는 방법 맵핑 작업 처리 후, 컨트롤러 내에 있는 타 맵핑주소로 이동하고자하는 경우 사용한다. 만약 아래의 리턴값을 LIST.DO로 지정한다면 LIST.DO에 해당하는 JSP로 이동하여 데이터를 처리하지 못하게 된다. */ return "redirect:list.do"; } // 방명록 글 삭제 @RequestMapping("/delete.do") /* RESPONSERBODY AJAX로 요청받은 URL맵핑 메소드는 반드시 RESPONSERBODY를 어노테이션 처리해야한다. 어노테이션 처리된 메소드는 RETURN값을 콜백 메소드로 돌려주게 되어있다. RESPONSERBODY 사용시 RETURN값은 주소가 아닌 리턴 타입의 값이 된다. */ @ResponseBody() public String delete(int idx) { int res = visit_dao.delete(idx); // 결과를 담을 RESULT 변수 생성 String result = "no"; // RES값이 1이라는 것은 삭제행이 한건이라는 뜻으로 잘 처리되었다는 의미와 같으니 결과를 YES로 변경 if(res==1) { result = "yes"; } return result; } // 방명록 수정 페이지로 이동 @RequestMapping("/modify_form.do") public String modify_form(int idx, Model model) { // 어떤 방명록의 수정인지 알아야하기에 컨트롤러로 IDX를 전송해준다. VisitVO vo = visit_dao.selectOne(idx); // 수정 페이지에 수정할 방명록의 정보를 띄울 수 있도록 VO객체에 정보를 담아 정보 수정창으로 전송 model.addAttribute("vo",vo); return Util.Visit.VIEW_PATH + "visit_modify_form.jsp"; } // 방명록 수정 @RequestMapping("/modify.do") public String modify(VisitVO vo) throws IllegalStateException, IOException { String ip = request.getRemoteAddr(); vo.setIp(ip); String webPath = "/resources/upload/"; String savePath = application.getRealPath(webPath); System.out.println(savePath); MultipartFile photo = vo.getPhoto(); String filename = "no_file"; if(!photo.isEmpty()) { filename = photo.getOriginalFilename(); File saveFile = new File(savePath,filename); if(!saveFile.exists()) { saveFile.mkdirs(); }else { long time = System.currentTimeMillis(); filename = String.format("%d_%s", time,filename); saveFile = new File(savePath,filename); } photo.transferTo(saveFile); } vo.setFilename(filename); int res = visit_dao.update(vo); return "redirect:list.do"; } }

# 10 VISIT_INSERT_FORM.JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here function send(f) { var name = f.name.value; var content = f.content.value; var pwd = f.pwd.value; if(name==''){ alert("이름을 입력해주세요."); return; } if(content==''){ alert("내용을 입력해주세요."); return; } if(pwd==''){ alert("비밀번호를 입력해주세요."); return; } f.action = "insert.do"; f.submit(); } ::방명록 남기기:: 작성자 내용 비밀번호 파일첨부

# 11 VISIT_LIST.JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> Insert title here // 내용 수정 function modify(f) { var pwd = f.pwd.value; // 원본 비밀번호 var c_pwd = f.c_pwd.value; // 사용자 입력 비밀번호 if(pwd != c_pwd){ alert("비밀번호가 다릅니다."); return; } f.action = "modify_form.do"; f.submit(); } // 내용 삭제 function del(f) { var pwd = f.pwd.value; // 원본 비밀번호 var c_pwd = f.c_pwd.value; // 사용자 입력 비밀번호 if(pwd != c_pwd){ alert("비밀번호가 다릅니다."); return; } if(!confirm("정말 삭제하시겠습니까?")){ return; } // 비밀번호가 일치하는 경우 AJAX를 통해서 삭제 결과를 받아온다. var url = "delete.do"; var param = "idx="+f.idx.value; // (보내고자하는 맵핑 주소, 보내는 파라미터, 처리 내용을 받아올 메소드, 전송방식) sendRequest(url,param,resultFn,"GET"); } // DEL의 콜백 메소드 function resultFn() { if(xhr.readyState==4 && xhr.status==200){ // 정상적으로 값을 전달받은 상태 // RESPONSETEXT는 맵핑된 컨트롤러에서 리턴받은 데이터를 뜻한다. var data = xhr.responseText; // 삭제 실패 if(data=='no'){ alert("삭제 실패. 관리자에게 문의하세요."); return; } // 삭제 성공 alert("삭제 성공"); // 삭제에 성공한 경우, 삭제한 페이지를 다시 보여주기위해서 다시 목록을 띄운다. location.href="list.do"; } } ::방명록 리스트:: ${ vo.content } 작성자:${ vo.name }(${ vo.ip }) 작성일:${ vo.regdate } 비밀번호 :

# 12 VISIT_MODIFY_FORM. JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here function send(f) { var name = f.name.value; var content = f.content.value; var pwd = f.pwd.value; if(name==""){ alert("이름을 입력해주세요."); return } if(content==""){ alert("내용을 입력해주세요."); return } if(pwd==""){ alert("비밀번호를 입력해주세요."); return } f.action = "modify.do"; f.submit(); } ::방명록 수정하기:: 작성자 내용 ${ vo.content } 비밀번호 파일첨부

​

from http://hikr90.tistory.com/153 by ccl(A) rewrite - 2022-01-01 01:01:49