Ajax Delete 예제

지금까지 프로그램은 서버에서 요청 후 결과 페이지까지 지정해줬다. 하지만 AJAX 요청을 이용해 요청의 결과에 따른 페이지 제어를 클라이언트에서도 할 수 있다. 이때 location.href를 사용한다.

$("#deleteBtn").click(function(){
               $.ajax({
                   url: '/memo/<%= selectedItem.id %>',
                   method: "DELETE",
               }).done(function(response){
                   location.href = "/";
               });
            });

deleteBtn 을 id로 가지고 있는 태그 클릭시 .ajax 명령어 통해 요청을 보낸다. method를 DELETE로 정하면 Express에서는 delete에 해당하는 메소드 중 일치하는 url 패턴을 찾아 수행한다. 중요한건 done 메소드의 위치. ajax 메소드 통해 요청 완료되면 그 결과를 받아와 이후 작업을 수행한다고 이해하면 된다.

const app = express();

app.delete('/memo/:id', function(request, response){

    let id = request.params.id;
    items.splice(id, 1);
    remakeItems(id);

    //response.redirect('/memo');
    response.send(true);

});

app.get('/memo/:id', function(request, response){
    let id = request.params.id;

    const item = items[id];

    fs.readFile('ejs/memo.ejs', 'utf8', function(err, data){
        response.type('text/html');
        response.send(ejs.render(data, {
            selectedItem : item,
            items : items
        }));
    });

});

Express에 등록해 둔 메소드를 찾아 수행 후 결과 response.send에 보낸다. 크게 다른 것은 없다.

글 찾아 삭제 버튼 누르면

인덱스 페이지로 이동한다. memo/0 으로 url 요청하면

다음과 같이 get 요청에 해당하는 결과가 수행된다.
이렇게 하면 data에 접근하는 url(delete, put)들을 get과 같은 url로 지정 가능해 사용자가 요청할 수 없도록 해 보안 또한 강화할 수 있다.