JavaScriptの非同期通信でのDB保存

Question

前提・実現したいこと

非同期通信を使って（Ajax）json形式でストップウォッチの時間をid="rap"を押したときに取得してDBに保存したい。

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

すべてのパラメータがnilで返ってくる

該当のソースコード

<%# タイマーの時間表示 %>
<div class="stop-watch">
  <p id="time">00:00:00.000</p>
</div>

<%# STARTとSTOPのボタン %>
<%= form_with url: watches_path, class: "buttons" do |f| %>
  <%= f.submit "START", class: "btn", id: "start" %>
  <%= f.submit "RAP", class: "btn", id: "rap" %>
<% end %>

def create
  @watch = Watch.create(watch: params[:watch])
  render json:{ watch: @watch }
end

function addRap() {
    const XHR = new XMLHttpRequest();
    const time = document.getElementById("time").innerHTML;
    XHR.open("POST", "/watches", true);
    XHR.setRequestHeader('content-type', 'application/json')
    XHR.onreadystatechange = () => {
      if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        const content = XHR.response;
        console.log(content)
      }
    };
      XHR.send("watch="+time);  //400(Bad Error)
  }

 rap.addEventListener('click', (e) => {
      addRap();
      e.preventDefault();
    }
  });

Rails.application.routes.draw do
  devise_for :users
  
  resources :watches, only: [:index, :new, :create]
end

addEventListnerでクリックしたときにaddRap()を発火させています。

試したこと

controllerでストロングパラメータを指定した

最後に

過不足あるかと思いますがよろしくおねがいします。

Comments

[m.ts10806]

ルーティングと、
addEventListnerのコードも含めて提示してください。
id=timeの要素がどこにあるかとか。

あとブラウザ開発ツールのコンソールにエラー出てませんか？
サーバー側のコンソールに何か出てませんか？
他者が状況把握するために、過はありませんが不足ばかりです。
質問者が過すぎたなと思うくらいがちょうど良いです。

[fastman]

ご指摘ありがとうございます。以降気をつけたいと思います。
情報を追記させていただきましたので、ご教授お願いできますでしょうか？

なお、コンソールにはエラーがでず、{id: null, watch: null, ....}のようにすべてnullで返ってきます。また、その後コンソールでかくにんしたところ、変数timeには正しいデータがコンソールに表示できましたので、おそらく、送信した際またはデータを受け取った際に間違っているところがあるようです。

Answer 1

空のFormDataを生成して、appendで必要な情報を代入し、ajaxにするとできました。

Answer 2

const time = document.getElementById("time").innerHTML;

で

XHR.send(time);

だと、リクエストはちゃんと送られないのでは。
XMLHttpRequest.send()

params[:watch]で受け取られているので、

例えば、こう？

XHR.send("watch="+time);

Comments

[fastman]

innerHTMLをAjaxで送ること自体が無理なのでしょうか。。。
ご教授いただいた内容で試してみましたが、うまくいきませんでした。

[m.ts10806]

「うまくいかない」と言われてもこちらには何が起きたのか伝わっていません。
>innerHTMLをAjaxで送ること自体が無理なのでしょうか。。。
無関係です。送るのは結局は変数であり文字列。
リクエスト内容と受け取る側が一致していれば問題ありません。

[m.ts10806]

あと、回答に提示したリンクだとGETはonloadですが、POSTはonreadystatechange でコールバックですね。

[fastman]

>ご教授いただいた内容で試してみましたが、うまくいきませんでした。
→返り値は変わらず{id:null, watch:null,....}でした。

回答で提示いただいた内容を元に書き換えてみましたが、XHR.send("watch="+time)のところで400エラーで、XHR failed loading POSTになり送信できませんでした。
JSの変更点は書き換えました。

[m.ts10806]

質問は編集できますので。

[fastman]

失礼しました。修正しました。
また、コントローラーでbinding.pryでデバッグしたところ、パラメータがすべてnilでした。