rails提供跳转js的ajax实例分析特殊情况

最新推荐文章于 2019-08-08 11:49:01 发布

qwbtc

最新推荐文章于 2019-08-08 11:49:01 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/qwbtc/article/details/51246860

版权

实例:

#############该实例是用ajax对页面动态添加图片和文字，并实现动态刷新

_form.html.erb中：

#######dom_id是rails提供的表示id的方法，这里这个方法用于刷新局部页面show_content,重要！！！！！：设计局部刷新的时候要把要局部刷新的页面render出来这样html()函数传参刷新的时候可以重新渲染这个页面

<% if @subject.id.present? %>
<button class='ui button'><%= link_to '增加图片', manage_add_content_path(@subject, 0), remote: true %></button>

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

<div id="<%= dom_id @subject, "contents" %>">
<%= render :partial => '/manage/subjects/show_content', :locals => {subject: @subject} %>
</div>
<% 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'
end
end

_show_content.html.erb中：

######来显示增加的图片和文字

<% if subject.body.present? %>
<table class="ui celled striped table">
<thead>
<tr>
<th>Type</th>
<th>Content</th>
<th>Operation</th>
</tr>
</thead>
<% subject.body.each_with_index do |s, index| %>
<% if s[:type] == 'text' %>
<tr>
<td><%= s[:type] %></td>
<td><%= s[:content] %></td>
<td>
<%= 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?')" %>
</td>
</tr>
<% elsif s[:type] == 'photo' %>
<tr>
<td><%= s[:type] %></td>
<td><%= image_tag(s[:medium_url]) if s[:medium_url] %></td>
<td>
<%= 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?')" %>
</td>
</tr>
<% end %>
<% end %>
</table>
<% end %>

add_photo.js.erb中：

$("#placeholder").html('<%= j(render(partial: "manage/subjects/add_photo", locals: {subject: @subject})) %>');
$("#placeholder-modal").modal("show");

add_text.js.erb中：

$("#placeholder").html('<%= j(render(partial: "manage/subjects/add_text", locals: {subject: @subject})) %>');
$("#placeholder-modal").modal("show");

_add_photo.html.erb中：

#############重要：：上传传文件或图片file时候用form_tag或form_for得加参数multipart: true否则上传不了，而且不支持弹出框把数据传递给controller的ajax所以只能用html请求，不加remote:true关键字

<div class="ui modal" id="placeholder-modal">
<i class="close icon"></i>
<div class="header">
Photo
</div>
<div class="content">
<div class="ui form">
<%= form_tag "/manage/subjects/#{@subject.id}/update_add_content", class: "ui form", multipart: true do %>
<input type="file" name="subject[body_data][photo]"></input>
<div class="field">
</br>
</br>
<%= submit_tag "approve", class: "ui green button" %>
</div>
<% end %>
</div>
</div>
</div>

_add_text.html.erb中：

####传字符串的时候支持ajax进行数据持久化，因为可以通过params参数进行传递

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"]
end

respond_to do |format|
format.js
format.html { redirect_to :back }
end
end

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: {subject: @subject})) %>');
$('#placeholder-modal').modal("hide");
$('#placeholder-modal').remove();