使用 AJAX 重载部分页面

场景

实现点击按钮后，重新加载部分页面而不刷新整个页面。

方法一

1.jQuery:

$(function(){
   $('body').on("click", ".ClassNameOfButton", function(){  
     $.ajax({
       url: "home/refresh_part"
     })
   }) 
});

注意这里jquery的事件如果用$('.class').click(function(){})可能会造成刷新后页面的js不能运行，原因是这样写只对当前页面的element有效，所以reload之后的元素就不适用了；而.on()可以适用于新创建的元素。

2.在view中，把要刷新的部分提取成partial,然后加上div:

<div class="reload"><%= render 'PartialName' %></div>

3.写一个js的template(refresh_part.js.erb):

$(".reload").html("<%= j(render 'PartialName') %>");

这里的 j() 是 escape_javascript() 的alias, 所以也可以写成：

$(".reload").html("<%= escape_javascript(render 'PartialName') %>");

4.最后写上路由：

get '/home/refresh_part', to: 'home#refresh_part'

方法二

直接用jQuery来完成：

1.jQuery:

$(function(){
  $('body').on("click", ".ClassNameOfButton", function(){
    $('.reload').load('/home/refresh_part');
  })
}

2.同上；

3.在对应的action里面render partial:

(in home_controller.rb)

def refresh_part
    render partial: "PartialName"
end

这种方法不需要新定义路由，似乎比上面个方法还简单些。

注意事项

参考文档，涉及到表单的话，一定要加上data-remote: true，加了之后，the form will be submitted by Ajax rather than by the browser's normal submit mechanism. Whenever you add remote: true you are telling your form make a POST request via JS instead of HTML. 否则会出现 missing template 之类的错误

场景

方法一

方法二

注意事项

相关资料