소개

Ajax에 대해 공부한 메모가 됩니다.
또한 Rails 및 Ajax 초학자 때문에 잘못되었을 가능성이 있기 때문에
참고할 때는 주의해 주십시오

환경

Rails 6.1.4
루비 2.7.3

목차

Ajax란?

비동기 통신이란

동기 통신이란

Rails에서 Ajax 처리 구현

환경

컨트롤러, 뷰 생성

jquery 설치

jquery 설정

routes 수정

HTML 수정

JS 수정

참고하신 사이트

Ajax란?

Asynchronous Javascript XML의 약자
Javascript와 XML을 사용하여 비동기 통신 수행

비동기 통신이란?

페이지를 업데이트하지 않고 일부 변경 사항을 반영
반영할 때까지 다른 처리가 가능

동기 통신이란?

전체 페이지를 업데이트하고 일부 변경 사항을 반영합니다.
반영할 때까지 다른 처리를 할 수 없다.

Rails에서 Ajax 처리 구현

컨트롤러, 뷰 생성

터미널

% 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 %>")

참고로 한 사이트

htps : // 메비에. 이나후/2021/01/31/포스트-28411/
htps //w w. 세주쿠. 네 t/bぉg/28967
htps : // 코 m / 조금 kp / ms / 39 펑 c0f31335328b34
htps : // 이 m/나베리나/있어 ms/c6b5c8d7756cb882fb20
htps : // 코 m / 히사무라 333 / ms / 에 3 에아 6 어 549 에 b09b7