jquery的ajax(put网页前端向服务器发送数据,服务器进行数据持久化等操作)

实例1：

_form.html.erb中：

########这里input框里是显示以前房间的position， 并且可以改, 这里的class是用来jquery监听的， value是用来input框中显示默认值的, data-id是用来传递subject.id的， data-id这个是自定义属性是用来ajax时用到url传递一个subject.id的

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

style.css中：

####css的鼠标焦点时候背景变色， css控制一个标签得从最外面的标签一层一层写 用空格间隔

.ui.form .ui.celled.striped.table input:focus {
  background-color: #FFFFCC;
}

app.js中：

#########url根据rooms_subjects的action的url：

PUT/manage/rooms_subjects/:id(.:format)manage/rooms_subjects#update来拼接的（查routes, 通过html自定义属性id-data的值获取id来拼接url）向update动作传data， 在update中可以params[:position]来引用$(this).val()的值

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

rooms_subjects_controller.rb中:

#########同过params[:position]来引用ajax传递的data值， 最后render nothing:true表示不渲染任何东西因为只是个ajax，不需要渲染

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

实例2：

_status.html.erb中：

#########自定义属性 data-id传id来拼接url， 注意！！！！！semantic ui中前面修饰的样子ui button 后面可以跟类名 status ， jquery监听class名字status即可不需要监听全名，即$(.status)， 不需要$(.ui.button.status)

<% if subject.status == 'pending' %>
  <button class="ui button status" data-id="<%= subject.id %>"><%= link_to "pending" %></button>
<% else %>
  <button class="ui green button status" data-id="<%= subject.id %>"><%= link_to "running" %></button>
<% end %>

app.js中:

#######jquery中.on()函数表示一直监听， click只监听点击的那一下，所以多个的时候要用.on（）函数。注意jquery中.text() .html()函数是取监听标签两尖号中间的值， 而val()函数是取标签属性value=""即属性value的值

  $(".status").on('click',function(){
    var subject_id = $(this).attr("data-id");
    var status = $(this).text();
    var mythis = $(this);


    if(status == 'pending'){
      status = 'running';
    }else{
      status = 'pending';
    }


    $.ajax({
      type: 'put',
      url: '/manage/subjects/' + subject_id + '/change_status',
      cache: false,
      data:{
        status: status
      },
      success:function(data){
        alert("修改状态成功");
        window.location.reload();
      }
    })
  });

subject_controller.rb中：

###可以用params[:status]来取ajax传递的data值

  def change_status
    Subject.find(params[:id]).update(status: params[:status])
    render nothing: true
  end