ajax 사용 방법

제이쿼리로 ajax가 쓰인 경우는 많은데 순수하게 자바스크립트로 쓰인 ajax를 찾기가 생각보다 어려웠다. 아래의 틀이 내가 항상 쓰는 ajax의 틀이다. 항상 form에서 submit타입의 button/input태그에 onclick를 사용해 함수를 호출한다. ur

1. 호출된 함수에서 가장 먼저 해줄 일은 기본으로 렌더링되는 상황을 막기위해서 preventDefault()를 사용한다
2. param에 view에 보낼 데이터를 딕셔너리 형태로 넣어준다 ex) ‘pk’:category_pk
3. form에는 csrf_token이 쓰이기 때문에 csrf_token를 headers에 넣어준다
4. 데이터 요청을 보낼 url을 작성해준다. 이때 product/select_detail/로 보내는것도 가능하다
5. view에게 보낼 데이터를 param에 담아서 body안에 JSON.stringfy()로 읽을 수 있는 타입으로 변경해 보낸다
6. 실제로 데이터가 View로부터 정상적으로 응답이 오게 되면 이곳에서 response안에 데이터가 담긴것을 볼 수 있다
7. 받은 데이터를 가지고 이곳 안에서 가공해준다. 보통은 화면과 똑같은 모습을 만들기 위해 innerHTML을 사용하여 똑같은 태그들을 추가해준다

function filter_product(category_pk) {
    event.preventDefault(); - 1
    let param = { - 2
    }
    let csrfValue = document.getElementsByName("csrfmiddlewaretoken")[0].value; - 3
    console.log(category_pk)
    // ajax통신
    fetch("{% url 'product:select_detail' %}", { - 4
      method: 'POST',
      headers: {
        "X-CSRFToken": csrfValue,
        "X-Requested-With": "XMLHttpRequest"
      },
      body: JSON.stringify(param),- 5
    }).then(function (response) { - 6
      return response.json()
    }).then(function (data) { - 7
    }).catch((error) => {
      console.log('error', error);
    })
  }