Rails這個超級強大的網站構建器為使用者介面變更和互動提供了ajax操作的能力,據我所知在Rails中使用ajax有兩種方法,下面為大家一一道來 ;)

一.在$(document).ready中註冊hook,伺機而動

我們可以為html中某個元素註冊回撥鉤子,比如在select中的選項發生改變的時候:

<%= select_tag("department",options_from_collection_for_select(@departments, "id", "name"),include_blank:false,:'data-remote'=>'true',:'data-url'
 
=>url_for(controller:'static_pages',action:'dep_changed'),:'data-type'=>'json') %>

上面程式碼中首先開啟了data-remote確保觸發遠端呼叫,注意最後一個data-type的型別為json,這決定了控制器中的響應型別:

def dep_changed
        log(params)
        dep = Department.find(params[:department])
        render :json=>dep.offices.map {|office| [office.id,office.name]}
    end
 

最後需要為#department註冊hook:

$(document).ready(function() {

  // #first_select is the id of our first select box, if the ajax request has been successful,
  // an ajax:success event is triggered.

  $('#department').on('ajax:success',null, function(evt, data, status, xhr) {
    //do some staff...
    });
  });
});
 

那麼我們在這種情況下如何除錯呢?以MacOS的Safari為例,開啟對應html頁面,選擇開發選單->資源->指令碼->application.js:

你可以在其中任意下斷點,很方便不是嗎!?

二.以Javascript方式響應

第二種方式不用註冊回撥,不用修改全域性的application.js檔案,你只需要為特定的動作建立js.erb指令碼即可,首先將select中的data-type項刪掉,這樣預設是以js方式響應.

修改對應Action:

def dep_changed
        log(params)
        dep = Department.find(params[:department])
        @offices = dep.offices
        respond_to do |format|
            format.js
        end
    end

建立與action同名的js.erb檔案dep_changed.js.erb:

(function() {
    var office_select = $('#office');
    office_select.empty();

    var opt = null;

    <% @offices.each do |office| %>
        opt = $('<option/>');
        opt.attr('value', <%=office.id%>);
        opt.text('<%=office.name%>');
        opt.appendTo(office_select);
    <% end %>

}).call(this);

不過這種方法無法下斷點除錯,但是你可以看到執行後的程式碼,還是以Safari為例,在打開了開發介面後,選擇資源->XHR:

在每次觸發JavaScript指令碼時,都會生成新的響應js程式碼,如上圖所示.

值得注意的是以第二種ajax方式操作時,即使刪除了html元素的data-type項,但如果你在application.js中為該元素設定了hook,則任然會觸發,只不過此時會出現錯誤,提示data物件非法,因為你沒有接收到json資料.如果你一定要同時使用兩種方法,那麼你必須預先判斷data是否有效.