Spring 3주차 API 설계, HTML, CSS, Javascript, AJAX, JSON

API 설계

 

 

GET, POST 방식

ARC

 

• 대표적인 HTML 태그들
  • h1~h6
  • → headline의 약자, 신문 제목 같은 녀석이에요.
  • div
  • → divison, 나누는 녀석이에요. 투명 비닐봉투!
  • p
  • → paragraph, 신문 기사 단락과 같은 텍스트 내용을 담습니다.
  • ul, ol, li
  • → (un)ordered list, list에 해당합니다. bullet point.
  • span
  • → 글을 중간중간 잘라내서 색을 입혀준다든지 할 때 사용합니다.
  • table, th, tr, td
  • → 표 입니다! 엑셀 같은 표를 그릴 때 사용합니다.
  • img
  • → 이미지를 나타낼 때 사용합니다.

 

 

Javascript 백틱 `${name} `

 

JQuery 

$('#contents').hide();

$('#contents').val();

$('#cards-box').empty();

$('#cards-box').append(` `);

 

JSON 

JSON.stringify: JSON을 문자열로 만들어주는 것

 

AJAX 요청

POST 방식

$.ajax({
    type: "POST",
    url: "/api/memos",
    contentType: "application/json", // JSON 형식으로 전달함을 알리기
    data: JSON.stringify(data),
    success: function (response) {
        alert('메시지가 성공적으로 작성되었습니다.');
        window.location.reload();
    }
});

 

GET 방식

$.ajax({
    type: 'GET',
    url: '/api/memos',
    success: function (response) {
        console.log(response);
    }
})

 

DELETE 

function deleteOne(id) {
    $.ajax({
        type: "DELETE",
        url: `/api/memos/${id}`,
        success: function (response) {
            alert('메시지 삭제에 성공하였습니다.');
            window.location.reload();
        }
    })
}