Rails : jquery에서 컨트롤러의 액션을 두드리고 jquery로 변수를 반환하는 방법

만든 것

소설가가 되려는 주소를 입력,
버튼을 누르면 입력 대상의 제목, 세부 사항을 가져오고 ajax로 표시.

개요

【jquery로 Rails 컨트롤러의 함수를 불러, 변수를 화면에 되돌린다】
라는 방법은 보이지 않았기 때문에 귀중한 것이라고 생각하고 있습니다.

【개요】
URL 입력란의 URL을 jquery로 감지
↓
컨트롤러의 고유 함수로 보내기
↓
함수 내에서 스크래핑, 인스턴스 변수에 정보를 넣습니다.
↓
화면에 다시 보내기
↓
jquery로 id 지정 등을하고 정보를 화면에 표시

소스 설명

이번 조작하는 화면은
Matome 모델의 show 화면에 있습니다.

컨트롤러에 함수를 정의. 스크래핑은 아래를 참조하십시오.
Rails 스크래핑 기법 Mechanize 사용법

app/controllers/matomes_controller.rb

  def scraping_novel
    require 'mechanize'

    agent = Mechanize.new
    page = agent.get(params[:url])
    @novel_title = page.at('.novel_title').inner_text
    @novel_description = page.at('#novel_ex').inner_text

    respond_to do |format|
      format.js
    end
  end

새 경로 추가
루트를 추가하지 않으면 id에 함수 이름이 포함되지 않습니다.

config/routes.rb

Rails.application.routes.draw do
  get "matomes/scraping_novel"
  resources :novels
  resources :matomes
  devise_for :users
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root 'matomes#index'
end

새로운 js 파일을 만듭니다.
컨트롤러 내에서 만든 함수와 같은 이름의 js.erb 파일을 views/컨트롤러 아래에 작성하십시오.
컨트롤러에서 얻은 두 개의 인스턴스 변수를 구문 분석,
나누기 위해 사이에 delimiter라는 단어를 넣습니다.

app/views/matomes/scraping_novel.js.erb

<%= @novel_title %>delimiter<%= @novel_description %>

이 js는
· 컨트롤러에 정보 보내기
· 컨트롤러로부터 정보를 받고 표시
두 가지를 수행합니다.

보낼 때는
URL에 함수 이름,
data내에 컨트롤러에 보내고 싶은 정보를 써 주세요.
params[:url]와 같은 형태로 컨트롤러 내에서 꺼낼 수 있습니다.

success: function(data)의 data에 js.erb 파일에 쓴 내용이 들어옵니다.
제목과 줄 사이에 delimiter라는 단어를 끼워 넣었기 때문에,
그래서 나누어 jquery로 양식에 입력하고 있습니다.

URL이 가정한 것과 다른 경우
화면상에 경고를 내게 되어 있습니다.

app/assets/javascripts/application.js

  $("#get-novel-info-button").click(function(){
      $.ajax({
          url: "scraping_novel",
          type: "GET",
          data: { url : $("#modal-novel-url").val()
                  },
          dataType: "html",
          success: function(data) {
              console.log('success');
              console.log(data);
              // app/views/matomes/scraping_novel.js.erb
              //上記ファイルの中身を文字列"delimiter"で分ける
              var split_datas = data.split("delimiter");
              $("#modal-novel-title").val(split_datas[0]);
              $("#modal-novel-description").val(split_datas[1]);
          },
          error: function(data) {
              console.log('error');
              alert("URLが不正、もしくはこのURLには対応していません。");
          }
      });
  });

감상

정말 감동했다.
스크래핑 놀랍습니다. ajax 대단합니다.
이것은 컨트롤러를 통해 다양하게 응용할 수있을 것 같고 너무 재미 있습니다.

참고 URL

Rails에서 jQuery에서 ajax
jQuery 내에서 Rails의 Action을 두드리는