DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Rails系統中的AJAX開發技術簡析(3)
Rails系統中的AJAX開發技術簡析(3)
編輯:AJAX詳解     
六、 使用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>標簽

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

class ListdemoController < ApplicationController
def index
end
def add_item
render_text "<li>" + params[:newitem] + "</li>"
end
end
  add_item行動處理器構建一個Html列表項片斷,它包含輸入到表單的newitem字段中的任何文本。

  -
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved