如何将 ajax 请求的成功响应传递给 html 模板？答案

【问题标题】：How to pass a success response from the ajax request to the html template?如何将 ajax 请求的成功响应传递给 html 模板？
【发布时间】：2015-08-04 09:14:45
【问题描述】：

我有一个包含照片列表的页面。

专辑/show.html.erb：

<% @images.each do |image| %>
  <article class="col-xs-12 col-sm-6 col-md-4" data-image-id="<%= image.id %>">
    <%= image_tag(image.image.url(:thumb), class: "thumb") %>
    <p class="description"><%= truncate(image.description, length: 100, omission: '...') %></p>
  </article>
<% end %>

相册控制器：

def show
  @user = @album.user
  @image = Image.new
  @album_id = params[:id]
  @images = Image.where(album_id: @album_id, user_id: @user.id).order(created_at: :DESC)
end

点击照片后，我发出 ajax-request 并显示带有照片图像的模式窗口。

js:

// detail image
$('#thumbsList .thumb').on('click', function(){
  var imageId = $(this).closest('article').attr('data-image-id');

  $.ajax({
    url: '/images/' + imageId,
    type: 'GET',
    data: { image_id: imageId },
    success: function(image){
      console.log(image.id); // OK
      console.log(image.description); //OK
      $('#modalDetailImage').modal();
    },
    error: function(xhr, ajaxOptions, thrownError){
      handleModal('Невозможно редактировать альбом', 'Ошибка на сервере. Повторите попытку через некоторое время. ', 'f00', 2000);
    }        
  })
});

图像控制器：

def show
  if @image_detail = Image.find(params[:image_id])
    render json: @image_detail, :status => 200 
  else
    render nothing: true, :status => 404 
  end
end

application.html.erb：

......
...........
....
....
<div class="modal fade modal_detail_image" id="modalDetailImage" tabindex="-1" role="dialog" aria-labelledby="modalAboutLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      ---------------<%= OUTPUT DETAIL PHOTO IMAGE %>--------------------------     
    </div>
  </div>
</div>

我不知道如何将变量从 ajax 函数 success 传递给 <%= OUTPUT DETAIL PHOTO IMAGE %>

我使用回形针宝石。这个 gem 的每张图片都有很长的路径

【问题讨论】：

也许您想将图像路径传递给模态？还是只是来自 ajax 响应的消息？

标签： javascript ruby-on-rails ajax ruby-on-rails-4

【解决方案1】：

很简单，只需将成功消息附加到 div 即可。从它的外观来看，您的变量只是文本：

var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + 'YOUR MESSAGE';

【讨论】：

显示图片需要执行表达式：image_tag(@user.avatar.url(:thumb).在JS文件中这个表达式不满足
@user.avatar.url(:thumb) 的输出是url吗？
alexsmn，是的。输出更长的 url。这个 url 生成 gem 'paperclip'。它看起来像这样：/home/kalinin/rails/phs/public/system/images/images/000/003/357/medium/123.jpg
如果不是将 url 传递给 image_tag 助手，而是将它传递给这与您要使用的助手相同，那该怎么办，如果我理解你想要的，你需要做的就是将成功的 url 传递给使用 js 的 img 块。