Rails系統中的AJAX開發技術簡析(3)

ajax|rails 六、 使用form_remote_tag

　　這個form_remote_tag()協助函數與link_to_remote()很相似，除了它也發送一個HTML表單的內容之外。這意味著該行動處理器可以使用使用者輸入的資料來形成響應。這個執行個體顯示了一個web頁面-它有一個列表和一個支援Ajax的表單-該表單能夠讓使用者添加一些選項到該列表中。

　　我的視圖模板(index.rhtml)看上去象:

＜html＞ ＜head＞ ＜title＞Ajax List Demo＜/title＞ ＜%= javascript_include_tag "prototype" %＞ ＜/head＞ ＜body＞ ＜h3＞Add to list using Ajax＜/h3＞ ＜%= form_remote_tag(:update =＞ "my_list", :url =＞ { :action =＞ :add_item }, :position =＞ "top" ) %＞ New item text: ＜%= text_field_tag :newitem %＞ ＜%= submit_tag "Add item with Ajax" %＞ ＜%= end_form_tag %＞ ＜ul id="my_list"＞ ＜li＞Original item... please add more!＜/li＞ ＜/ul＞ ＜/body＞ ＜/html＞

　　請注意上面加粗的兩部分，它們定義了表單的開始和結束。因為該表單以form_remote_tag()而不是form_tag()開始,應用程式將使用XMLHttpRequest提交這個表單。form_remote_tag()中的參數看上去是:

　　·更新參數用於指定DOM元素的id及行動執行結果要更新的內容-在本例中是my_list。

　　·url參數用於指定伺服器端行動-在本例中，調用一個稱為add_item的行動。

　　·位置參數代表插入到my_list元素頂部的返回的HTML片斷-在本例中是一個＜UL＞標籤

圖4.在增加任何項前

　　我的控制器類看起來象下面這樣:

class ListdemoController ＜ ApplicationController def index end def add_item render_text "＜li＞" + params[:newitem] + "＜/li＞" end end

　　add_item行動處理器構建一個HTML清單項目片斷，它包含輸入到表單的newitem欄位中的任何文本。

圖5.添加幾個新的清單項目之後