RubyonRailsでAJAXを使用する方法

RailsプロジェクトでAJAXを使用する方法をよりよく理解できるように、AJAXが存在する理由を理解しましょう。

Webサイトにアクセスすると、どうなりますか？

サーバーからページが読み込まれます。ただし、新しい情報を表示したい場合は、ページをリロードして更新するか、リンクをクリックして別のページにアクセスする必要があります。

これは同期フローです 。

新しいデータは、サーバーから新しいページが要求された場合にのみ表示されます。

しかし…

このページをリロードしたくない場合はどうしますか？

バックエンドからデータをフェッチする場合はどうなりますか 、いつでも好きなときに、現在のページの任意の部分を更新できるようにしますか？

これがAJAXの出番です。

AJAXはAsynchronousJavascript＆XMLの略です 。

これはWebフレームワークに依存しない手法ですが、この記事で学習するように、Railsは特にそれを適切にサポートしています。

アプリにAJAXを追加すると、アプリがより複雑になることに注意してください。

直接AJAXリクエスト

AJAXには、Javascriptを使用してブラウザーから作成するリクエストと、Rubyアプリから処理するレスポンスの2つの部分があります。

AJAXリクエストを行うことができます プレーンなJavascriptを使用します。

ただし、これには多くの定型コードが必要なため、通常はjQueryなどのJavascriptライブラリを使用してこれを行います。

jQueryリクエストは次のようになります ：

$.get( "/vegetables", function(data) {
  alert("Vegetables are good for you!");
});

ただし、Rails 5.1 jQueryはデフォルトでは使用できないため（ただし、追加し直すことはできます）。

注 ：InvalidAuthenticityTokenを取得します jQuery POSTリクエストを実行するとエラーが発生します。これは、csrf-tokenを送信する必要があることを意味します セキュリティ対策として現在のページから。 Rails.ajaxを使用する これは自動的に行われます。

解決策があります！

Railsには独自のAJAX関数が含まれています ：

Rails.ajax({
  url: "/books",
  type: "get",
  data: "",
  success: function(data) {},
  error: function(data) {}
})

覚えておいてください、これはまだリクエスト側から、ブラウザからです。

これはJavascriptコードですという意味です 。

Railsでは、このAJAX機能は「控えめなJavaScript」または略して「UJS」と呼ばれるものによって提供されます。

AJAXを使用したパーシャルの更新

AJAXから取得したデータでページの一部のみを更新する場合は、ほとんどの場合2つのオプションがあります。

1. 要素を更新するJavascript+ERBビューを作成できます
2. 新しいHTMLを文字列として使用してコントローラーからJSON応答を返し、Javascriptを使用して要素を更新できます

3番目のオプションもあります。

データのみをJSONとして返す必要があります 、次にそのデータを使用してJavascriptでHTML要素を生成します。

これがReactのようなJSフレームワークの出番です。

私の意見では、それらは多くの不必要な複雑さを追加します 。

しかし、これはプレーンなJavascriptで処理できます！

それがオプション1と2です。

今のところそれらに固執しましょう🙂

Javascriptビューの例 ：

Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")

j escape_javascriptのエイリアスです

jQueryの例 ：

$('.random-number').html("<%= j (render partial: 'random') %>")

両方のhtml ＆innerHTML ターゲット要素の内容を置き換えます。

全体を置き換える代わりに、新しい要素をリストに追加（jQuery）することもできます。

このコードを拡張子が.js.erbのファイルに入れます 、現在のアクションの名前（create.js.erbなど） ）＆viewsフォルダ内。

コントローラでは、他のビューと同じようにこのビューをレンダリングできます。

今 ：

AJAX呼び出しを行うと、このJavascriptコードが自動的に実行され、HTMLが更新されます。

2番目のオプションを見てみましょう。

これがコントローラーコードです ：

render json: { html: render_to_string(partial: 'random') }

次に、Javascriptコードから ：

Rails.ajax({
  url: "/books",
  type: "get",
  success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
})

これを行う別の方法です！

何を使用する必要がありますか？

DHHのお気に入りは、彼が「SJR」（サーバー生成のJavascript）と呼ぶ最初の方法です。

これがRailsがあなたにこれをしてほしい方法だと思いますが、両方を試してみてください（SJR ＆render_to_string ）自分で、どれが自分に最適かを確認してください。

JSビューにHAMLを使用する方法

わかりました。

あなたがHAMLユーザーだとしましょう。

このSJRを使用することは可能ですか？ テクニックとレンダリング.js.haml ビュー？

はい！

ここに例があります ：

- content = j (render partial: "random")

Rails.$('.random-number')[0].innerHTML = ("#{content}")

ERBバージョンよりも少し醜いですが、機能します。

ページを更新せずにRailsフォームを送信する方法

AJAXを使用してフォームを送信する場合は、AJAXリクエストを作成しなくても送信できます。

Railsがそれを処理できます。

どのように？

remote: trueを使用します form_forのオプション 。

ここに例があります ：

<%= form_for @fruit, remote: true do |f| %>
  <%= f.label :name, 'Fruit' %>
  <%= f.text_field :name %>

  <%= f.submit 'Create' %>
<% end %>

これで、[作成]をクリックすると、RailsからAJAXリクエストが送信され、ページはリロードされません。

検証エラーを表示する場合 Javascriptビュー（.js.erb）を作成してレンダリングする必要があります ファイル）現在のエラーを新しいエラーに置き換えます。

「AJAXを使用したパーシャルの更新」の例のように。

ところで、このremote オプションはリンクでも使用できるため、AJAX deleteを実行できます リクエスト。

例 ：

<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }

Javascriptビューを使用して応答を処理できます。

HTMLリクエスト（ページのリロードから送信される）とAJAXリクエストの両方を処理する場合は、respond_toのようなものを使用する必要があります。 メソッド。

例 ：

respond_to do |f|
  f.html { redirect_to :index }
  f.js
end

この例では、Turbolinksにこれを処理させる方が簡単な場合があります。

AJAXリクエストとredirect_toは引き続き実行できます コントローラから（respond_toなし） ）、その後、Turbolinksはページをリロードせずにページのコンテンツを置き換えます。

AJAXが機能していませんか？ここにいくつかのヒントがあります

AJAXリクエストが機能しない場合は、デバッグを行う必要があります。

まず、ブラウザ開発ツールを開きます。

JavaScriptエラーがないかコンソールパネルを確認する 。

それらを修正してください。

また、ターゲットにしているCSSセレクターが正しく、タイプミスがないことを確認してください。

次に、レールログを確認します エラーの場合。

次に、正しいビューがレンダリングされていることを確認します。

このプロセスに従うと、AJAXリクエストが機能しない理由を見つけて修正できるはずです。

概要

非同期リクエストを作成できるWeb開発手法であるAJAXについて学習しました！

Railsでこれを実装する方法も学びました。 通常の（JSフレームワーク以外の）Railsアプリを機能させるためにAJAXは必要ありません。 、しかしそれはあなたのツールボックスにあると便利なものです。

この記事を共有することを忘れないでください より多くの人々がそれから利益を得ることができます🙂

読んでくれてありがとう！