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つのオプションがあります。
- 要素を更新するJavascript+ERBビューを作成できます
- 新しい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は必要ありません。 、しかしそれはあなたのツールボックスにあると便利なものです。
この記事を共有することを忘れないでください より多くの人々がそれから利益を得ることができます🙂
読んでくれてありがとう!
-
RubyでStructとOpenStructを使用する方法
Rubyの構造体とは何ですか? 構造体は組み込みのRubyクラスであり、値オブジェクトを生成する新しいクラスを作成するために使用されます。値オブジェクトは、関連する属性を一緒に格納するために使用されます。 ここに例があります : Point 2つの座標(x &y 。 このデータはさまざまな方法で表すことができます。 いいね : 配列[10, 20] ハッシュ{ x: 10, y: 10 } オブジェクトPoint.new(10, 20) 複数のPointを使用する場合 、オブジェクトアプローチを使用することをお勧めします。 しかし… これら2つの値を一緒に格納するた
-
RailsアプリケーションでOmniAuth-Twitterを使用する方法
このチュートリアルでは、アプリケーションのユーザーがTwitterアカウントを使用してログインできるようにする方法を学習します。これを行うには、OAuthなどのツールを使用すると簡単になります。 OmniAuthのTwitter戦略を含むOmniAuth-Twitterを利用します。 飛び込みましょう! はじめに Railsアプリケーションを生成することから始めます。ターミナルから、コマンドを実行して実行します。 rails new Tuts-Social -T Gemfileを開き、ブートストラップgemを追加します。 #Gemfile...gem bootstra