使用AJAX重载部分页面
创建于: 2017-06-09   最后更新: 2017-08-16
总结 AJAX jQuery Rails

场景

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

方法一

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 之类的错误

相关资料

RailsCast #240

https://stackoverflow.com/questions/13988556/is-it-possible-to-refresh-partial-frequently-using-ajax/44453659#44453659

https://stackoverflow.com/questions/8594408/reload-javascript-file-after-an-ajax-request