jquery ajax非同步儲存資料

通過jquery .ajax函數非同步儲存資料

實際例子:

_form.html.erb中:

<input type="text" size="1" class="edit_position" value="<%= f.position %>" data-id='<%= f.id %>'></input>

對input接受的資料進行儲存， 傳data-id自訂屬性的意思是儲存f.id的值，以便jquery的.ajax函數的url屬性時候用到

app.js中:

  $(".edit_position").focus(function(){
    $(this).css("background-color","#FFFFCC");
  });


  $(".edit_position").blur(function(){
    $(this).css("background-color","#D6D6FF");


    var rooms_subject_id = $(this).attr("data-id");
    $.ajax({
      type: 'put',
      url: '/manage/rooms_subjects/'+ rooms_subject_id,
      cache: false,
      data:{
        position: $(this).val()
      },
      success:function(data){    
             alert("修改成功。");              
             window.location.reload();      
      }
    });
  });

focus監聽滑鼠焦點input事件，blur監聽滑鼠input失去焦時間點事件,.ajax由滑鼠失去焦點來觸發， rooms_subject_id由attr函數取到自訂的data-id屬性的值為url的:id，也就是選定的room_id， 事件類型為put， url為處理該資料庫儲存資訊的action的url， 注意如果url為/dsfa/fdsa/:id， 則要在html中自訂屬性傳遞:id的值進行+號拼接，data中是傳遞的資料position對應action中擷取資料的params[:position]， $(this).val()為擷取class的.edit_position的input內容, success為成功後的函數進行window.locaton.reload();重新整理頁面

room_subjects_controller.rb中:

def update
@rooms_subject = RoomsSubject.find(params[:id])
@rooms_subject.update(position: params[:position])
render nothing: true
end

對ajax的data中傳遞來的資料params[:position]進行資料的持久化

render nothing: ture是返回nothing否則action執行之後必須重新導向到一個頁面或者展示資料有自己同名.html.erb對應的頁面，ajax並沒由返回頁面只是儲存資料所以要render nothing: true