解決したいこと
XMLHttpRequestのsendを使用して、parameters(クエリパラメータ)にデータを入れたい。
環境
ruby 2.5.1
rails 6.0.3.2
関連ソース
javascript
1function ajaxSearch(e) 2{ 3 e.preventDefault(); 4 5 let mailData={email:searchEmail.value}; 6 let inputData={user:mailData}; 7 let jsonData=JSON.stringify(inputData); //このときjsonDataは{"user":{"email":"a@a.com"}} 8 let xhr=new XMLHttpRequest(); 9 let res=xhr.responseText; 10 xhr.onload=function(){...} 11 xhr.onerror=function(){alert('error');} 12 xhr.open("GET",'/users.json'); 13 xhr.responseType='json'; 14 xhr.setRequestHeader('Content-Type', 'application/json'); 15 xhr.send(jsonData); 16} 17 18searchEmail.addEventListener('keyup',ajaxSearch);
html
1<form action="/groups" accept-charset="UTF-8" method="post"> 2 3<div class="field"> 4<label>Group name</label> 5<input type="text" name="name" id="name"> 6</div> 7 8<div class="field"> 9<label>search Email</label> 10<input id="searchEmail" name="email" placeholder="e@mail.com" type="email" value=""> 11</div> 12 13<div class="field" id="searched_member"> 14</div> 15 16<div class="actions"> 17<input type="submit" name="commit" value="Create" class="group_form__submit" id="group_form__submit" data-disable-with="Create"> 18</div> 19 20</form>
ruby
1users_controller.rb 2 3 UsersController < ApplicationController 4 def index 5 @user=User.find_by(user_params[:email]) 6 binding.pry 7 respond_to do |format| 8 format.html {redirect_to :root} 9 format.json {render json: @user} 10 end 11 end 12 13 private 14 def user_params 15 params.require(:user).permit(:email) 16 end 17end
簡単に実現したい処理を説明
- input type="text" にグループ名記入
- input type="email" でメアドを非同期検索 #問題発生
- 結果を div id="searched_member" に表示
- submitでグループ名とメアドでクリエイト
問題内容
-
javaScript内でsend直前までのjsonDataは
{"user":{"email":"a@a.com"}}
-
send後をターミナルで確認すると
ターミナル Started GET "/users.json" for 127.0.0.1 at 2020-08-07 19:57:54 +0900 Processing by UsersController#index as JSON Parameters: {"user"=>{}} Completed 400 Bad Request in 1ms (ActiveRecord: 0.0ms | Allocations: 474) ActionController::ParameterMissing (param is missing or the value is empty: user):
と何故かParametersは空っぽ
この問題を解決して、parameterにjsonDataを入れたいです。
お詳しいかたに教えていただけましtら幸いです。
それではよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/07 19:18