2008年11月22日

Ruby on Railsのチュートリアル〜Ajax

コードなにがしの「Ruby on Railsあれこれ」にも投稿していますが、こちらにも。


目次


●事前準備
●概要
●サンプルのポイント
●サンプルの使い方
●ファイル構成
●ビュー(画面)
●コントローラー

内容


事前準備


JQueryの準備


"ror-tutorial\public\javascripts"フォルダにJQueryサイトからJQueryファイルをダウンロードして"jquery.js"にリネームしてコピーします。

概要


Ajaxを行うアプリケーションです。

入力画面(index.html.erb)

tutorial_ajax_1.jpg


結果画面(index.html.erb)

tutorial_ajax_2.jpg

サンプルのポイント


・JQueryを使用してAjaxします。

サンプルの使い方


サンプルはあらかじめ用意していないので、以降の項目を参照にして、自分で作成しなければいけません。作成後に、ブラウザからhttp://127.0.0.1:3000/ajaxにアクセスしましょう(ポート番号"3000"は適宜、環境に応じて読み替えて下さい)。

ファイル構成


本項で作成するファイル

ファイル名種類
index.html.erbビュー
ajax_controller.rbコントローラー


ビュー(画面)


入力画面、兼、結果画面を作成しましょう。
"ror-tutorial\app\views\ajax\index.html.erb"ファイルを以下の内容で作成します。

<html>

<head>
<title>Tutorial: Ajax</title>
<%= stylesheet_link_tag 'ror' %>
<%= javascript_include_tag "jquery" %>
</head>
<body>


<h2>Tutorial: Ajax</h2>
<span id="message"></span><br />
<input type="button" value="hello" onclick="$('#message').load('/ajax/hello');"/>

</body>
</html>


コントローラー


"ror-tutorial\app\controllers\ajax_controller.rb"ファイルを以下の内容で作成します。

class AjaxController < ApplicationController

#初期画面表示
def index
render :action => 'index.html.erb'
end

#Ajaxで文字列データを返す
def hello
render :text => "こんにちは"

end

end


posted by 台北猫々 at 09:43| Comment(0) | TrackBack(0) | 技術メモ(Ruby)