rails提供跳轉js的ajax例項分析特殊情況

例項:

#############該例項是用ajax對頁面動態新增和文字，並實現動態重新整理

_form.html.erb中：

#######dom_id是rails提供的表示id的方法，這裡這個方法用於重新整理區域性頁面show_content,重要！！！！！：設計區域性重新整理的時候要把要區域性重新整理的頁面render出來這樣html()函式傳參重新整理的時候可以重新渲染這個頁面

<% if @subject.id.present? %>

<%= link_to '增加', manage_add_content_path(@subject, 0), remote: true %>

<%= link_to '增加文字', manage_add_content_path(@subject, 1), remote: true %>

<%= render :partial => '/manage/subjects/show_content', :locals => %>

<% end %>

subject_controller.rb中：

######可以通過render來指向跳轉到那個ajax的.js,erb檔案中

def add_content

@subject = subject.find(params[:id])

if params[:type_id] == '0'

render 'add_photo.js.erb'

else

render 'add_text.js.erb'

endend

_show_content.html.erb中：

######來顯示增加的和文字

<% if subject.body.present? %>

type

content

operation

<% subject.body.each_with_index do |s, index| %>

<% if s[:type] == 'text' %>

<%= s[:type] %>

<%= s[:content] %>

<%= link_to 'edit', manage_edit_content_path(subject, index), remote: true %> |

<%= link_to 'delete', manage_content_delete_path(subject, index), remote: true, :onclick => "alert('are you sure?')" %>

<% elsif s[:type] == 'photo' %>

<%= s[:type] %>

<%= image_tag(s[:medium_url]) if s[:medium_url] %>

<%= link_to 'edit', manage_edit_content_path(subject, index), remote: true %> |

<%= link_to 'delete', manage_content_delete_path(subject, index), remote: true, :onclick => "alert('are you sure?')" %>

<% end %>

add_photo.js.erb中：

$("#placeholder").html('<%= j(render(partial: "manage/subjects/add_photo", locals: )) %>');

$("#placeholder-modal").modal("show");

add_text.js.erb中：

$("#placeholder").html('<%= j(render(partial: "manage/subjects/add_text", locals: )) %>');

$("#placeholder-modal").modal("show");

_add_photo.html.erb中：

#############重要：：上傳傳檔案或file時候用form_tag或form_for得加引數multipart: true否則上傳不了，而且不支援彈出框把資料傳遞給controller的ajax所以只能用html請求，不加remote:true關鍵字

photo

<%= form_tag "/manage/subjects/#/update_add_content", class: "ui form", multipart: true do %>

<% end %>

_add_text.html.erb中：

####傳字串的時候支援ajax進行資料持久化，因為可以通過params引數進行傳遞

text

<%= form_tag "/manage/subjects/#/update_add_content", remote: true, class: "ui form" do %>

<% end %>

subject_controller.rb中：

##################重要：：：respond_to表示當ajax時（_add_text.html.erb中通過params傳字串可以ajax）請求是js，則當js請求時定向到和action同名的.js.erb檔案中，也就是update_add_content.js.erb中進行隱藏彈出框和區域性重新整理的操作，當請求是html也就是不加關鍵字remote:true的時候重定向到:back也就是重新整理上乙個頁面，彈出框之前的頁面

def update_add_content

@subject = subject.find(params[:id])

if params["subject"].present?

@subject.body_data = params["subject"]["body_data"]

endrespond_to do |format|

format.js

format.html

endend

update_add_content.js.erb中：

#dom_id是rails提供的表示id的方法， html()表示重新載入html頁面這裡是區域性重新整理 locals引數很重要因為區域性重新整理需要用到更新後的例項變數@subject，這樣才能重新整理後看到剛新增的東西

$("#<%= dom_id @subject, "contents" %>").html('<%= j(render(partial: "manage/subjects/show_content", locals: )) %>');

$('#placeholder-modal').modal("hide");

$('#placeholder-modal').remove();

rails提供跳轉js的ajax例項分析特殊情況

js中的ajax和jquery中的ajax學習筆記

js 跳轉鏈結的幾種方式

js 跳轉鏈結的幾種方式

rails提供跳轉js的ajax例項分析特殊情況

js中的ajax和jquery中的ajax學習筆記

js 跳轉鏈結的幾種方式

js 跳轉鏈結的幾種方式

相關推薦