我想使用 Ajax 将微帖子添加到我的主页,而无需在创建后立即重定向。我在表单中添加了remote: true
:
<%= form_for(@micropost, html: { multipart: true }, remote: true) do |f| %>
并编辑了微帖子控制器的创建操作,如下所示:
def create
@micropost = current_user.microposts.build(micropost_params)
microposts_number = current_user.microposts.where("created_at >= ?", Time.zone.now.beginning_of_day).count
if microposts_number < 10
if @micropost.save
respond_to do |format|
format.html do
flash[:success] = "Micropost created!"
redirect_to root_url
end
format.js
end
else
@feed_items = []
flash[:danger] = @micropost.errors.full_messages.join(', ')
render 'static_pages/home'
end
else
flash[:danger] = "You have exceeded your daily share of microposts (10)."
redirect_to root_url
end
end
微帖子在主页中显示为有序的项目列表,其中@feed_items
是current_user
的微帖子的集合,因此属于微帖子:
<% if @feed_items.any? %>
<ol class="microposts">
<%= render @feed_items %>
</ol>
<%= will_paginate @feed_items %>
<% end %>
因此,我创建了app/views/microposts/create.js.erb
,使用jQuery选择ol.microposts
和函数prepend()
将新创建的微帖子添加到页面:
$("ol.microposts").prepend('<%= escape_javascript(render partial: @micropost) %>');
用于在ol.microposts
内部构建li
元素的部分_micropost.html.erb
如下(简化(:
<li id="micropost-<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content">
<%= micropost.content %>
<%= image_tag micropost.picture.url if micropost.picture? %>
</span>
</li>
但是,Micropost控制器不响应Ajax请求,而是重定向到root_url
,仅响应html(来自cloud9服务器的输出(:
Started POST "/microposts" for 82.56.61.198 at 2017-07-14 09:44:55 +0000
Cannot render console from 82.56.61.198! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by MicropostsController#create as HTML
...
Started GET "/" for 82.56.61.198 at 2017-07-14 08:51:42 +0000
Cannot render console from 82.56.61.198! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by StaticPagesController#home as HTML
我不明白为什么微邮局控制器的创建操作不响应 js 格式。我尝试克隆部分_micropost.html.erb
并使用实例变量@micropost
而不是迭代的变量micropost
,但它不起作用。服务器日志中没有错误。
MicropostsController#create as HTML
这是由于AJAX
的限制。来自参考资料
Ajax 使用称为
xmlhttprequest
的东西来发送数据。 不幸的是,xmlhttprequests无法发布文件
也就是说,您不能通过 AJAX 发布文件。您可能需要有关Remotipart或Jquery-File-Upload的帮助
您只告诉操作在成功的保存路径中与format.js
一起respond_to
。你需要添加一个respond_to
块,其中包含你想为js
做的任何事情,无论你render
或redirect_to