今回は備忘録も兼ねて、私がAjax実装するにあたってよくぶち当たった２種類のエラーについてまとめていきます！

参考程度にして頂けると幸いです

それではスタート！

➀４０４エラー

そもそも404エラーとは？？？

簡単にまとめると、サーバーエラーの1つで、ページが存在していないときに表示されるエラーです。

・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 Internal Server Error

そもそも500 Internal Server Errorとは？？？

簡単にまとめると、サーバー側に問題があるときに表示されるエラーです。
*ただ5xxエラーはたくさんの種類があるので内容にも種類はさまざまです。

・ajaxでは、送った側（サーバー側）で起きやすいエラーです！
　例を出しながら見ていきましょう！

create.json.jbuilder

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

上記のコードですと、jsonに情報を読み込むスペルミスがありそうですね...

こうした上で検証ツールのコンソールログを確認して見ます！

500 Internal Server Errorが発生していますね

500 Internal Server Errorまとめ：コントローラやjbuilderの記述を確かめる！

ajaxで私がぶち当たったエラーは以上になります！

エラーが起こった時は、
console.log
debugger
binding.pry
と言ったデバックを利用すると解決するスピードも速くなるかと思うので、実践していってみてください！

それではご静聴ありがとうございました！