入力フォームから値を受け取りjson形式で値を返す
class TestController < ApplicationController def index end def post name = params[:name] render json:{success: true, message: name} end end
<form id="company"> <label for="name">名前</label> <input type="text" name="name" id="name"> <button id="submit">送信</button> </form> <script> document.getElementById('submit').addEventListener('click', function(event) { event.preventDefault(); const formData = new FormData(document.getElementById('company')); fetch('/', { method: 'POST', headers: { 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, body: formData }) .then(response => { if (response.ok) { return response.json(); } else { throw new Error("通信に失敗しました。"); } }) .then(data => { console.log(data); }) .catch(error => { console.error('エラー:', error); }); }); </script>
Rails.application.routes.draw do get "/" => "test#index" post "/" => "test#post" end
上の例では、入力フォームから値を受け取り、コントローラーは入力フォームの値をjson形式でビューに返し、コンソールログに表示している例となります。
このページではビューでの内容の説明は省略させていただきます。
Ajaxでのサーバーサイドへのデータ送信の記事はプログラミング基礎のJacascriptを参考にしてください。
まず、config.routes.rbで
と入力することでビューからpostメソッドで送信されてくると、TestControllerのpostメソッドが動作するようになっています。
コントローラーで入力フォームからの値を受け取るには
の形式で記入します。
json形式でビューに値を返すときは
のように記入します。
このページではビューでの内容の説明は省略させていただきます。
Ajaxでのサーバーサイドへのデータ送信の記事はプログラミング基礎のJacascriptを参考にしてください。
まず、config.routes.rbで
post "/" => "test#post"
と入力することでビューからpostメソッドで送信されてくると、TestControllerのpostメソッドが動作するようになっています。
コントローラーで入力フォームからの値を受け取るには
params[":インプットのname属性"]
の形式で記入します。
json形式でビューに値を返すときは
render json: {json形式}
のように記入します。