質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

同期

複数のディレクトリに存在するファイルを更新した場合に、すべてのファイルにも更新が行われる事、又は、同じ記憶領域に同時にアクセスして内容の整合性が失われてしまう事をを防ぐ制御などを同期と呼びます。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

1回答

1410閲覧

非同期通信がうまくいきません!FormData 404のエラーです。

hana_123

総合スコア3

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

同期

複数のディレクトリに存在するファイルを更新した場合に、すべてのファイルにも更新が行われる事、又は、同じ記憶領域に同時にアクセスして内容の整合性が失われてしまう事をを防ぐ制御などを同期と呼びます。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2020/11/06 09:44

編集2020/11/06 10:22

前提・実現したいこと

railsを使ってのメモ機能実装中です。
現在非同期通信を試みているのですが、
うまくいかず迷っています。

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

console

1memo.js:9 POST http://localhost:3000/memos 404 (Not Found) 2(anonymous) @ memo.js:9

該当のソースコード

memo.js

1function memo (){ 2 const submit = document.getElementById("memo-btn"); 3 submit.addEventListener('click', (e) => { 4 const formData = new FormData(document.getElementById("memo_area")); 5 const XHR = new XMLHttpRequest(); 6 XHR.open("POST", "/memos", true); 7 XHR.responseType = "json"; 8 XHR.contentType = "application/json" 9 XHR.send(formData); 10 11----------formDataでエラーが出ているためここまでの記入で止まっています。 12 13 e.preventDefault(); 14 }); 15} 16 17window.addEventListener('load', memo);
<div class="memo-form-block"> <%= form_with(model: @memo, url: user_memos_path(current_user.id), local: true, id: "memo_area") do |f| %> <%= f.text_area :title, placeholder:"TITLE", class:"memo-text", id:"memo_title"%> <%= f.text_area :content, placeholder:"MEMO", class:"memo-text", id:"memo_content", rows: 6 %> <%= f.submit "NEW POST", class:"memo-btn", id:"memo-btn" %> <% end %> </div>
resources :users, only: :show do resources :memos, only:[:index, :create] end

試したこと

コントローラーcreateアクションにbinding.pryをかけたが意味がなかった。
formのidを変えてみたが意味がなかった。
channelを使ってみたが、そこでもエラーが出てしまった。

いろいろ調べてみたところ、 XHR.open("POST", "/memos", true);
の部分のパス指定に誤りがありそうです。
:user_idの部分の書き方のヒントお願いします・・・。
ちなみに、memoはuserにネストさせています

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

memosテーブルのカラムはtitleとcontentの二つです。
同期通信では問題なく動作します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/11/07 00:00

どこでmemo.jsを読み込んでいるのでしょう。 その記述部分も記載してください。
m.ts10806

2020/11/07 00:01

あぁ。そこじゃないか。
guest

回答1

0

そのroutesですと /users/38/memos (38はuserのid)というURLですね。
POST '/emos' でやるには、ネストしていない routesも定義が必要です

投稿2020/11/06 23:56

winterboum

総合スコア23331

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hana_123

2020/11/07 14:03

すみません返信遅れました! 解決して、自己解決投稿したのですが反映されていないため 再度投稿させていただきます。 解決方法については、 解決したので報告させていただきます! channelを使っての実装に変えてみて再び非同期通信を試みました。 そうしたところ、ネスト部分関係なくスムーズに行ったのでこちらで実行させていただきました! 貴重なアドバイスありがとうございました!! 今後ともよろしくお願いいたします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問