重温一遍rails中ajax的操作

rails.js是rails处理ajax的核心代码，它其实就做两件事情：

1. 在rails.js的代码中，会去寻找页面中的links、forms和inputs，如果这些元素带有data-remote=true，那么就给其绑定新的Ajax提交或者点击事件。
2. 当点击完成后，Ajax请求发出，然后就触发四个js自定义事件，你可以通过这些事件来处理ajax响应

具体开发的时候，也非常简单（以form_for为例）：

1. 在原本的form_for加上:remote => true，这样就会在生成的html代码上加上data-remote=true。

2. Ajax不仅需要编写客户端代码，服务器端也要做处理，服务端返回什么类型的数据，这个可以通过在form_for上加上"data-type" => 'json'，当然如果不添加，默认是js，示例如下：

   # app/controllers/users_controller.rb
   # ......
   def create
     @user = User.new(params[:user])
   
     respond_to do |format|
       if @user.save
         format.html { redirect_to @user,notice: 'User was successfully created.' }
         format.js   {}
         format.json { render json: @user,status: :created,location: @user }
       else
         format.html { render action: "new" }
         format.json { render json: @user.errors,status: :unprocessable_entity }
       end
     end
   end

3. 接下来就有两种方式，第一种，返回html片段或者json，在页面添加自定义事件处理代码，让js完成页面的更新：
    
    ```
    $(document).ready ->
      $("#new_user").on("ajax:success",(e,data,status,xhr) ->
        $("#new_user").append xhr.responseText
      ).on "ajax:error",xhr,error) ->
        $("#new_user").append "<p>ERROR</p>"

4. 第二种，返回的是一段js，客户端加载并执行这段js，这个js是由js.erb文件生成的，在js.erb中我们写上处理页面更新的代码，这种方式和第一种相比，代码更轻松简单：

   $("<%= escape_javascript(render @user) %>").appendTo("#users");

###更详细：
http://guides.ruby-china.org/working_with_javascript_in_rails.html  
https://www.alfajango.com/blog/rails-3-remote-links-and-forms  
https://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery  
http://blog.madebydna.com/all/code/2011/12/05/ajax-in-rails-3.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!