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