Ajax에서 자주 발생하는 오류!

이번은 비망록도 겸해, 내가 Ajax 실장하는데 있어서 잘 부딪힌 2 종류의 에러에 대해서 정리해 갑니다!

참고 정도로 해 주시면 다행입니다

그럼 시작!

➀404 오류

원래 404 오류란? ? ?

간단히 요약하면 서버 오류 중 하나이며 페이지가 없을 때 표시되는 오류입니다.

・ajax에서는, 정보를 보내는 단계에서 일어나기 쉬운 에러입니다!
예를 내면서 봅시다!

posts.js

$(function() {
  function buildPost(post){
    var html = `<div class="content">
                  ${post.text}
                </div>`
    return html;
  }

  $("#new_post").on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: '/posttt',  ←スペルミス
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentData: false
    })
    .done(function(post){
      var html = buildPost(post);
      $('.contents').append(html);
      $('post_text').val('');
    })
    .fail(function(post){
      alert('エラー');
    })
  })
});

위의 코드라면 ajax를 보내는 목적지에 철자 오류가있을 것 같습니다 ...

이러한 위에서 검증 툴의 콘솔 로그를 확인해 봅니다!



404 오류가 발생했습니다.

404 오류 요약 : ajax 대상 URL의 설명을 확인하십시오!

➁500 내부 서버 오류

원래 500 Internal Server Error란? ? ?

간단히 요약하면 서버 측에 문제가있을 때 표시되는 오류입니다.
* 단지 5xx 오류는 많은 종류가 있으므로 내용도 종류는 다양합니다.

· ajax에서는 보낸 쪽 (서버 쪽)에서 일어나기 쉬운 오류입니다!
예를 내면서 봅시다!

create.json.jbuilder

json.text @post.texttt  ←スペルミス

위 코드에서 json에 정보를 읽는 철자 오류가있을 것 같습니다 ...

이러한 위에서 검증 툴의 콘솔 로그를 확인해 봅니다!



500 내부 서버 오류가 발생했습니다

500 Internal Server Error 요약 : 컨트롤러 및 jbuilder 설명을 확인하십시오!

ajax에서 내가 부딪힌 오류는 더 이상 될 것입니다!

오류가 발생하면,
console.log
debugger
binding.pry
라고 말한 디버그를 이용하면 해결하는 속도도 빨라질까 생각하기 때문에, 실천해 가 보세요!

그럼 조용히 감사합니다!