2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails6】Ajax学習メモ

Last updated at Posted at 2021-11-03

#はじめに
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を使用して、非同期通信を行うこと

##非同期通信とは
ページを更新することなく、一部の変更箇所を反映する
反映するまで他の処理ができる

##同期通信とは
ページ全体を更新し、一部の変更箇所を反映する
反映するまで他の処理ができない

#RailsでAjax処理を実装
ajax.gif

ajax図解.jpg

##コントローラ、ビュー作成

ターミナル
% bundle exec rails g controller Practice index

##jqueryインストール

ターミナル
% yarn add jquery

##jquery設定

app/config/webpack/environment.js
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修正

config/routes.rb
Rails.application.routes.draw do
  get 'practice/index', to: 'practice#index'
  post 'practice/index', to: 'practice#index'
end

##コントローラ修正

app/controllers/practice_controller.rb
<h1>Ajax</h1>
<%= form_with local: false do |form| %> 
  <%= form.text_field :title %>  
  <%= form.submit "文字列変更" %>  
<% end %>

##HTML修正

app/views/practice/index.html.erb
<h1>Ajax</h1>
<%= form_with local: false do |form| %> 
  <%= form.text_field :title %>  
  <%= form.submit "文字列変更" %>  
<% end %>

##JS修正

app/views/practice/index.js.erb
$('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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?