非同期通信を実装できないです。

Question

前提・実現したいこと

現在投稿アプリを作成しております。
投稿アプリで非同期通信を実装したいのですが、現在実現できず詰まっております。検索をかけたり、テキストに則って試みていましたが解決できなかったです。

rails初心者です。
非常に困っております。お力添えをよろしくお願いいたします。

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

memo.js

function memo() {
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("form"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", debate_comments_path, true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.post;
      const list = document.getElementById("list");
      const formText = document.getElementById("content");
      const HTML = `
        <div class="post">
          <div class="post-date">
            投稿日時：${item.created_at}
          </div>
          <div class="post-content">
          ${item.content}
          </div>
        </div>`;
      list.insertAdjacentHTML("afterend", HTML);
      formText.value = "";
    };
    e.preventDefault();
  });
}
window.addEventListener("load", memo);

commentコントローラー

class CommentsController < ApplicationController
  before_action :authenticate_user!, unless: proc { coach_signed_in? }

  def index
    @commented = Comment.all
    @comment = Comment.new
    @debate = Debate.find(params[:debate_id])
    if coach_signed_in?
      @comments = @debate.comments.includes(:coach)
    else
      user_signed_in?
      @comments = @debate.comments.includes(:user)
    end
  end

  def create
    @commented = Comment.all
    @debate = Debate.find(params[:debate_id])
    if coach_signed_in?
      @comment = @debate.comments.new(coach_comment_params)
    else
      user_signed_in?
      @comment = @debate.comments.new(user_comment_params)
    end
    if @comment.save
      render json: {post: @comment}
    else
      @comments = @debate.comments.includes(:coach)
      @comments = @debate.comments.includes(:user)
      render :index
    end
  end

ビューファイル

<%= form_with model: [@debate, @comment], url: debate_comments_path, method: :post, id: "form", local: true do |f| %>
    <div class="form">
      <%= f.text_field :content, class: 'form__text-field js-form__text-field', placeholder: 'コメント入力', id: "content" %><br>
      <div class="image-file">
        <%= f.label :image %><br>
        <%= f.file_field :image, class: 'hidden form__image-field js-form__image-field' %>
      </div>
      <div class="field">
        <%= f.label :video %><br>
        <%= f.file_field :video, :accept => 'video/*', class: "form__video-field js-form__video-field" %>
      </div>
    </div>
    <%= f.submit '送信', id: "submit" %>
  <% end %>
  <%= link_to 'トップに戻る', root_path %>

送信すると下記のみが表示されるビューページに遷移します。renderの記述によって起きていることは分かりましたが、理解はできておりません。
{"post":{"id":135,"content":"a","debate_id":20,"user_id":null,"coach_id":3,"created_at":"2021-01-12T19:55:13.721+09:00","updated_at":"2021-01-12T19:55:13.721+09:00"}}

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

拙い文章で申し訳ありません。
わからない部分、追加して欲しいコードがありましたら、コメントいただけると幸いです。

よろしくお願いいたします。

Answer 1

submitボタンは所属しているformのaction先に「送信」します。
Ajaxをしたい（画面遷移させない、送信させない）のでしたら、クリックイベント冒頭でpreventDefault()で止めるか、submitボタンではなくbuttonにしてください。

Comments

[jm_swim]

m.ts10806様
返信ありがとうございます。
知識不足で申し訳ありませんが、preventDefault()でクリックイベント冒頭を止めるとは、どの位置でしょうか？XHR.open以降に置いた場合は今まで通りにデータが送られ、データのみが記述されたビューページに遷移し戻ると投稿されている状態、それ以前に置くとデータの送信はできなかったです。どちらもform内の上書きもできておりません。

ビューファイルのf.submitの部分をbuttonにしてみましたが、挙動に変化はなかったです。

[m.ts10806]

「非同期通信」はあくまでバックグラウンドで実行するもの、という前提を念頭において実装する必要があります。

あと他にも
「debate_comments_path」というJavaScriptの変数
どこにも定義されてないので、エラー出てるのでは？JavaScriptのほうで。
ブラウザのデベロッパツールのコンソールを確認してみてください。

[jm_swim]

m.ts10806様
XHR.open("POST", debate_comments_path, true);
上記の第二引数はURIパターンが入るということですが、URIパターンで記述すると「/debates/debate_id/comments」になりdebate_idが取得できないのでパス（debate_comments_path）を記述していました。
URIパターンで記述すると、404エラーと400エラーが出てしまいますが、debate_comments_pathであればエラーは出ず、データのみが記述されたビューページに遷移します。

[m.ts10806]

ひとまずerbで生成されたURLが欲しいのでしたら、
hiddenのvalueに埋め込んで、JavaScriptから取得するとか、
formのaction属性をJavaScriptから取得するとかで解決できるように思います。

[jm_swim]

m.ts10806様
ありがとうございます。アドバイスを元に取り組んでみます！