【jQuery・Ajax】ActionController::UnknownFormat

Question

前提・実現したいこと

今jQueryのAjaxを使い、レビューの投稿画面を実装しています。
フォームの中にレビューを書き、送信ボタンを押すとその内容が画面に非同期で表示されるようにしたいです。
レビュー投稿画面はreviews/show.html.hamlで設定しています。

そこでreview.jsのファイルにAjaxを記述したのですが、
フォームの中に文字を入力して送信ボタンを押すと、エラーが出てきてしまいました。
解決方法を教えていただけますと幸いです。

発生している問題・エラーメッセージ

ActionController::UnknownFormat in ReviewsController#create
ActionController::UnknownFormat

json形式でコントローラーにデータを送りたいのですが、
ターミナルのログにはHTMLとして送信されたと書かれてしまっています。

該当のソースコード

▼app/assets/javascripts/review.js

$(function(){
  function buildHTML(review){
  let html = `<div class="Message_box">
                <img class="Message_box__User_image" src="/attachments/1aab43602b1af4375a5bdc1eb3ad4ab5756602bd/store/${review.profile_image}/profile_image">
                <div class="Message_box__Content">
                  <a class="Link Text Message_box__Content__Name" href="/posts_g/8">${review.user_name}</a>
                  <div class="Message_box__Text Text">
                    ${review.content}
                  </div>
                </div>
              </div>`
  return html;
  }
  $('.New_r').on('submit', function(e){
    e.preventDefault();
    let formData = new FormData(this);
    let url = $(this).attr('action');
    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      dataType: 'json',
      format: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      let html = buildHTML(data);
      $('.Reviews').append(html);
      $('.Textbox_r').val('');
      $('.Submit_r').prop('disabled', false);
    })
    .fail(function() {
      console.log('error');
    });
  })
})

▼app/controllers/reviews_controller.rb

class ReviewsController < ApplicationController

  def index
    @user = User.find(params[:user_id])
  end
  
  def create
    @user = User.find(params[:user_id])
    @review = @user.reviews.new(review_params)
    if @review.save
      respond_to do |format|
        format.json
      end
    else
      @reviews = @user.reviews.includes(:user)
      render :index
    end
  end

  private

  def review_params
    params.require(:review).permit(:content).merge(user_id: current_user.id)
  end

end

▼app/views/reviews/show.html.haml

.Header_r
  .Title_r
    = "#{@user.name}さんのレビュー"
  .Main__content
    .Wrapper_r
      .Reviews
        = render "review"
  .Main__form
    .Wrapper_r
      = form_with model: [@user, @review], html: {class: "New_r"}, local: true do |f|
        .Main__form__contents
          .Main__form__contents__input
            = f.text_field :content, class: 'Main__form__contents__input__text Textbox_r'
          = f.submit '送信', class: 'Main__form__contents__btn Submit_r'

▼app/views/reviews/create.json.jbuilder

json.content  @review.content
json.user_id  @review.user.id
json.user_name  @review.user.name
json.profile_image  @review.user.profile_image_id

▼routes.rb

  resources :users do
    resources :reviews, only: [:index, :create]
  end

試したこと

以下の内容を確認したところ、間違いは見つかりませんでした。

・AjaxのdataTypeに間違いがないか？
・create.json.jbuilderがちゃんと対応するコントローラー名のディレクトリに入っていて、アクション名と一致するファイル名になっているか？

補足情報（FW/ツールのバージョンなど）

バージョンは、Ruby 2.6.5、Rails 6.0.3.2です。

▼rails routesの結果（ターミナル）

▼サーバーのログ（ターミナル）

▼Fiddlerの検証結果

Comments

[退会済みユーザー]

> let formData = new FormData(this);

そのコードで this は間違いないのでしょうか？ form 要素に enctype="multipart/form-data" は設定されてますか？　Fiddler などのキャプチャツールを使って要求が期待通りの形で出ているか調べてみましたか？

[kumamin]

ご回答ありがとうございました。
form要素にenctype="multipart/form-data"と記述してもエラーは解決しませんでした。
Fiddlerは使い方がわからないのですが、e.preventDefault();の後にconsole.log(this)を挿入しthisがformを指定できているのは確認しました。

[退会済みユーザー]

ファイルをアップロードするのだろうと思ってましたが、違ったら失礼しました。（そう思ってましたので、「form 要素に enctype="multipart/form-data" は設定されてますか？」とお聞きしました）

何にせよ、キャプチャツールで要求が期待通り出ているかを調べれば、問題がクライアント側にあるのかサーバー側にあるのか分かると思うのですが。Fiddler でなくても Chrome のディベロッパーツールでも調べられると思いますので、調べてみてはいかがでしょう。ちなみに Fiddler では以下の記事の一番下の画像のような結果が得られます。

http://surferonwww.info/BlogEngine/post/2020/07/09/uploading-multiple-files-in-different-folders.aspx

jQuery ajax を使ってファイルその他を含む formData を enctype="multipart/form-data" で送信したものです。

[kumamin]

ご丁寧に回答していただき、誠にありがとうございます。
フォームに入力するのは文字だけで、ファイルはアップロードはしないようになっています。
こちらこそ説明不足で失礼いたしました。

Fidderインストールしてみたんですが、あまり見方がわからなかったです...せっかく紹介してくださったのにすみません。
ちなみに前回の回答で書いたconsole.log(this)というのはChromeのデベロッパーツールで確認したもので、formのデータは取れていることはわかっています。
また、質問時に載せた画像のサーバーのログから判断すると、ajaxでjsonのフォーマットを指定しているはずなのに"as HTML"として送られてしまっていることがわかります。
jsonのフォーマットしか用意しておらずhtmlに対応するフォーマットがないためこのようなエラーが起こってしまっているんだと思います。
なのでjsonで確実にデータを送れるようにしたいのですが、そのやり方がわからず困っています。
一応Fiddlerの結果の画像を追記しておきますね。

Answer 1

原因はわかりませんでしたが、解決しました。

Answer 2

エラーメッセージのとおりです。format.jsonしか実装していないので、JSON指定（リクエストのURLに.jsonを付ける）以外のリクエストはこのようなエラーで失敗します。

対応策としては、「リクエストのURLを.jsonで終わるようにする（この場合POST /reviews/8.jsonのようになる）」のが手っ取り早いです。

Comments

[maisumakun]

なお、$.ajaxの「dataType: 'json'」は、レスポンス結果の処理を指定するためのもので、リクエストに影響するものではありません。

[kumamin]

ご回答ありがとうございました。
すみません、昨日ルーティングを変えて解決したと思ったんですがまた同じエラーが起こってしまいました。
review.jsで let url = $(this).attr('action'); の部分を
let url = "/users/8/reviews.json"; のように変えてもエラー画面は変わりませんでした。
ルーティング変更後の編集したコードを投稿に反映させましたので、再度ご回答いただけると大変助かります。