CRUD 구현하기 - front end

HTML FORM에서는 기본적으로 GET과 POST밖에 지원을 해주지않는다.

그래서 request를 보낼때, INPUT 타입으로 _method를 주어서 거기에 원하는 CRUD를 넣어 전송할 수 있다.

그러면, web.xml에 이 필터를 추가해 놓는다면, _method에 해당하는 RequestMetod에 매핑이 된다.

<filter>

       <filter-name>httpMethodFilter</filter-name>

       <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>

</filter>

<filter-mapping>

      <filter-name>httpMethodFilter</filter-name>

       <url-pattern>/*</url-pattern>

</filter-mapping> 

그리고 jsp단에서는 이에 따라서 값을 변경해주는 로직이 필요하다.

document.getElementById()으로 받아온 form 아이디와 form을 연결해준다. 그리고 넘어온 아이디가 없다면document.createElement()으로 form을 새로 만들어 주고,

document.setAttribute(key, value)을 이용하여 input이나 hidden값을 담아주고 appendChild()과 document.body.appendChild()으로 부모에 연결시켜준다. 이를 이용해서 위에서 말한 로직을 만들어준다.

아래는 그 코드이다.

function Func(_formId) {
    
    this.formId = (if(_formId == "")) == true ? "commonForm" : _formId;
    this.url = "";
    
    if(this.formId == "commonForm"){
        
        formId = document.createElement("form");
    }
    else{
        formId =  document.getElementById(_formId);
    }
    
    this.setUrl = function setUrl(url){
        this.url = url;
    };
    
    this.addParam = function addParam(key, value){
        
        var hidden = document.createElement("input");
        
        hidden.setAttribute("type", "hidden");
        hidden.setAttribute("name", key);
        hidden.setAttribute("id", key);
        hidden.setAttribute("value", value);
        
        formId.appendChild(hidden);
    };
    
    this.submit = function submit(method){
        
        if(method == "PUT"){
            
            var hidden = document.createElement("input");
            
            hidden.setAttribute("type", "hidden");
            hidden.setAttribute("name", "_method");
            hidden.setAttribute("value", "PUT");
            
            formId.appendChild(hidden);
            
            method="POST";
        }
        else if(method == "DELETE"){
            
            var hidden = document.createElement("input");
            
            hidden.setAttribute("type", "hidden");
            hidden.setAttribute("name", "_method");
            hidden.setAttribute("value", "DELETE");
            
            formId.appendChild(hidden);
            
            method="POST";
        }
        
        formId.setAttribute("action", this.url);
        formId.setAttribute("method", method);
        
        document.body.appendChild(formId);
        
        formId.submit();    
    };
    
}

이렇게 준비가 모두 완료되었으면 jsp에서 CRUD 를 구현할수 있다. 

GET

var Func = new Func();
Func.setUrl(URL);
Func.submit("GET");  

POST

var Func = new Func("frm");
Func.setUrl(URL);
Func.submit("POST");

PUT

var Func = new Func("frm");
Func.setUrl(URL);
Func.submit("PUT");

DELETE

var Func = new Func("frm");
Func.setUrl("URL"+ {id});
Func.submit("DELETE");

해당하는 곳에서 이렇게 메서드만 구현해주면 간단하게 CRUD를 요청할수가 있다.