#はじめに
Ajaxについて勉強したメモになります
また、Rails及びAjax初学者のため、間違っている可能性もありますので
参考にされる際はご注意ください
##環境
Rails 6.1.4
ruby 2.7.3
#目次
- Ajaxとは
- 非同期通信とは
- 同期通信とは
- RailsでAjax処理を実装
- 環境
- コントローラ、ビュー作成
- jqueryインストール
- jquery設定
- routes修正
- HTML修正
- JS修正
- 参考にさせていただいたサイト
#Ajaxとは
Asynchronous Javascript XMLの略
JavascriptとXMLを使用して、非同期通信を行うこと
##非同期通信とは
ページを更新することなく、一部の変更箇所を反映する
反映するまで他の処理ができる
##同期通信とは
ページ全体を更新し、一部の変更箇所を反映する
反映するまで他の処理ができない
##コントローラ、ビュー作成
% bundle exec rails g controller Practice index
##jqueryインストール
% yarn add jquery
##jquery設定
const { environment } = require('@rails/webpacker')
// ↓追加
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
// ↑追加
module.exports = environment
##routes修正
Rails.application.routes.draw do
get 'practice/index', to: 'practice#index'
post 'practice/index', to: 'practice#index'
end
##コントローラ修正
<h1>Ajax</h1>
<%= form_with local: false do |form| %>
<%= form.text_field :title %>
<%= form.submit "文字列変更" %>
<% end %>
##HTML修正
<h1>Ajax</h1>
<%= form_with local: false do |form| %>
<%= form.text_field :title %>
<%= form.submit "文字列変更" %>
<% end %>
##JS修正
$('h1').html("<%= @title %>")
#参考にさせていただいたサイト
https://mebee.info/2021/01/31/post-28411/
https://www.sejuku.net/blog/28967
https://qiita.com/jonakp/items/39fecc0f31335328b34e
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20
https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9