非同期通信でコメント機能を実装したい

Question

非同期通信でコメント機能を実装したい

Ruby on railsで記事投稿アプリを作成しています。
非同期通信でコメントを表示させたいのですが、途中の段階でレスポンスをコンソール上で確認しようとしているのですが、ブラウザが遷移してパラムスのみが表示される状態になってしまいコンソールに表示する事ができません。
初心者でわからないことばかりで、大変恐縮ですが解決方法をご教示いただけると幸いです。
なお、非同期でない通常のコメント機能は実装済です。

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

該当のソースコード

class CommentsController < ApplicationController
  def create
    @article = Article.find(params[:article_id])
    @comment = Comment.new(comment_params)
    if @comment.save
      render json: {comment: @comment}
    end
  end

  private

  def comment_params
    params.require(:comment).permit(:text).merge(user_id: current_user.id, article_id: params[:article_id])
  end
end

function post (){
  const submit = document.getElementById("submit_btn");
  submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("new_comment"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/articles/:article_id/comments", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      console.log(XHR.response.comment)
    };
    e.preventDefault();
  });
}

window.addEventListener('load', post);

<div class="article-show-wrap">
  <div class="article flex-column">
    
    <div class="article-imgs pt-4 text-center">
      <%= image_tag @article.image.variant(resize: '700x500'), class:"article-box-img" %> 
    </div>
    
    <section>
      <% if user_signed_in? %>
        <%if current_user.id == @article.user_id %>
          <div class="buttons text-right mt-1">
            <%= link_to 'edit', edit_article_path, method: :get, class: "btn btn-outline-info shwbtn" %>
            <%= link_to 'delete', article_path(@article), method: :delete, class:'btn btn-outline-danger shwbtn' %>
          <% end %>
      <% end %>
    </section>

    <section>
      <h2 class="name text-center">
        <%= @article.title %>
      </h2>
      <div class="col-6 mx-auto">
        <div class="detail-article">
          <%= @article.memo %>
        </div>
      </div>
    </section>

    <section class="details mt-4">
      <h6 class="name text-center">been @
        <%= @article.place %>
      </h6>
      <h6 class="name text-center">date : 
        <%= @article.date %>
      </h6>
    </section>
  </div>

  <div class="comment-column flex-column m-5">
    <h4 class="text-center"> Comments <i class="far fa-comments"></i></h4>
    <div class="col-5 mx-auto">
      <%= form_with model: [@article, @comment], local: true do |form| %>
        <%= form.text_field :text, id:"new_comment", class:"comment-text-form", placeholder:"add a comment..." %> 
        <%= form.submit "post", class:"btn btn-sm btn-info", id:"submit_btn" %>
      <% end %>
    </div>
      <% if @comments %>
      <div class="comments", id="comments">
        <% @comments.each do |comment| %>
          <div class="comment-case col-6 mx-auto m-1 case", id="comment_case">
            <strong class="h6"><%= link_to comment.user.nickname, "/users/#{comment.user_id}", classs: "comment-name" %> : </strong>
            <p class="h6"><%= comment.text%></p>
            <p class="text-right"><%= comment.created_at.strftime("%Y/%m/%d %H:%M") %></p>
          </div>
        <% end%>
      </div>
      <% end %>
  </div>
</div>

Comments

[yambejp]

途中段階という定義がわかりません。
どうなったときにどうしたいか具体的に説明して下さい

[退会済みユーザー]

説明が足りずすいません。
入力したコメントを非同期でビューに表示させる前にフォームの入力内容が正しく取得できているのかコンソール上で確認したいのですが、コード内にconsole.logを記載しているにも関わらずページが遷移しビュー上にパラムス内容が表示されてしまいます。画面を遷移させずにコンソール上でフォームの入力内容を確認できるように修正したいと思っています。
よろしくお願い致します。

[yambejp]

サブミットしてるなら非同期処理じゃなくたんなるpost処理でページは遷移しますよね？
一旦HTMLに書き起こしてデバッグした方がわかりやすいと思います

Answer 1

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector("#submit_btn").addEventListener("click", (e) => {
    const body = new FormData();
    body.append('test',document.querySelector("#new_comment").value);
    const url="・・・";
    const method="post";
    fetch(url,{method,body}).then(res=>res.text()).then(console.log);
    e.preventDefault();
  });
});
</script>
<form>
<input type="text" name="hoge" id="new_comment">
<input type="submit" value="send" id="submit_btn">
</form>

Comments

[退会済みユーザー]

ありがとうございます！