rails中發送ajax請求

來源:互聯網
上載者:User

最近在寫一個blog系統練練手,遇到一個一個問題,使用者添加評論的時候想發送ajax請求,但是rails裡的ajax和Python中的不太一樣,Python中的ajax是用js,jquery實現的和rails不太一樣,在此記錄一下,研究了好久終於弄明白了一點

 

告訴架構我們要發送ajax請求

rails這個架構吧,ajax與後端結合的非常緊密。

當我們想發送一個ajax請求的時候,在模板產生的時候我們可以添加一個屬性

form表單, <%= form_for (Comment.new), url: post_comments_path(@post),remote:true do |f| %> 當我加上remote:true時那麼就會發送ajax請求了。

a標籤 也是一樣  <%= link_to 'ajax-request', '/xxxx/create', remote: true%> 這樣也就可以發送ajax請求了。

 

為什麼我們這麼一設定就可以發送ajax請求了呢。因為rails內部使用了?

Rails 使用一種叫做 Unobtrusive JavaScript(UJS) 的方式來掛載內建的 JavaScript 功能,也就是你在 app/assets/javascripts/application.js 裡面載入的 //= require jquery_ujs,這些功能包括

  • 讓超連結可以用 :method 參數支援非 GET 方法
  • 用超連結、按鈕和表單可以用 :remote => true 支援 Ajax
  • 超連結、按鈕和表單可以用 "data-confirm" 參數可以跳確認對話視窗
  • 送出按鈕可以用 data-disable-with 參數在送出表單時暫時關閉按鈕避免重複送出

 

這裡我也遇到了一個問題當我直接發送的時候,伺服器告訴我沒有csrf token驗證

這裡我們需要在模板中加上 <%= csrf_meta_tags %> 這樣就不會出錯了

 

Ajax請求的過程

1.當我們點擊發送ajax請求的時候,會到相應的控制器中。比如我這裡到了cmment控制器中。

comments_conttroller.rbclass CommentsController < ApplicationController  def create    pp params    @post = Post.where(id: params[:post_id]).first    @comment = Comment.new(user_id: current_user.id, post_id: params[:post_id], content: params[:comment][:content])    respond_to do |format|      if @comment.save        format.html          # 裡面是要產生的html代碼,就是我在頁面上要添加的         format.js              #執行的js代碼 檔案名稱和方法名一致,例如我這個是create.js.erb        format.json {render json: @comment}      end    end  end  private    def comment_params      params.require(:comment).permit(:content)    endend

respond_to do |format| "api.rubyonrails.org/classes/ActionController/MimeResponds.html"可以到該網站去查看用法

主要就是看返回什麼我們這裡是ajax請求那麼返回的就是format.js

2. 到了相應的create.js.erb中

$("#comment_content").append("<%= escape_javascript(render 'create') %>")
<%= escape_javascript(render 'create') %>  

 這裡回去找相對應的模板 我這裡render 'create' 那麼他就回去找(因為我這裡是comments下,回在comments目錄下找)_create.html.erb。

 

這樣就可以發送ajax請求了

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.