Question

我正在使用来自AJAX调用的JSON数据来构建网址并在模式上显示Google Map API图像。这意味着我正在使用jQuery编辑innerHTML。为此，

要显示图像，我必须使用javascript来引用经度和纬度值并构建链接。

var google_map_url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + data.location.latitude + ',' + data.location.longitude + '&zoom=14&size=400x300&sensor=false';

"<%= escape_javascript(image_tag " + google_map_url + ")%>"

问题是我也在使用escape_javascript和我的image_tag（如上所示），这不会生成图片。我的观点只显示+google_map_url+。

另一个escape_javascript image_tag有效，因为我不必将字符串拆分为组件："<%= escape_javascript(image_tag photo[:url]) %>"

我如何解决这个问题，以便在使用javascript变量时仍能生成图像？

index.html.erb

<div class="body_container">

    <div id="photos_container">
    <% @photos_array.each do |photo| %>

      <%= link_to '#' do %>
        <div class='each_photo_container', id='<%="#{photo[:id]}"%>' >
          <%= image_tag photo[:s_url] %>
        </div>
      <% end %>


    <!-- Load Modal onClick -->
    <script type="text/javascript">
    jQuery(function() {
      $('#<%=photo[:id]%>').click(function (e) {

        //ajax call to fetch photo info

        var fetch_id = '<%=photo[:id]%>';
        var fetch_secret = '<%=photo[:secret]%>';  

        $.ajax({
          type: 'GET',
          url: '/photos/fetch_info',
          dataType: 'json',
          data: { 'id' : fetch_id, 'secret' : fetch_secret },
          success: function(data){

               var google_map_url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + data.location.latitude + ',' + data.location.longitude + '&zoom=14&size=400x300&sensor=false';          

            //edit innerHTML of basic_modal
            $('.basic_modal').html(

              "<div id='googlemap_image'>"+
                "<%= escape_javascript(image_tag " +google_map_url+ ")%>"+
              "</div>" +

              "<div id='modal_image'>"+
                "<%= escape_javascript(image_tag photo[:url]) %>"+
              "</div>"+

              "<div id='modal_photo_info_container'>"+
                 "<div class='modal_photo_attr'>"
                    +data.title+ 
                 "</div>"+ 
                 "<div class='modal_photo_attr'>"+
                    "By: " +data.owner.username+ 
                 "</div>"+ 
                 "<div class='modal_photo_attr'>"
                    +data.location.region._content+ ", " +data.location.country._content+ 
                 "</div>"+
              "</div>"


             );

            //load modal
        $('.basic_modal').modal({
              overlayClose:true
            });

          } //end success: function(result)
        });


        return false;
      });
    });

    </script>


    <% end %>

    <div class="basic_modal">
    </div>

  </div>
</div>

photos_controller.rb

def fetch_info
  @info = flickr.photos.getInfo(:photo_id => params[:id], :secret=> params[:secret])

  respond_to do |format|
    format.json { render :json => @info }
  end
end

Answer 1

"<%= escape_javascript(image_tag " +google_map_url+ ")%>"

如果你写的如上所述，它将被视为以下

1. "<%= escape_javascript(image_tag "

2 + google_map_url +

 3.  ")%>"

要获得所需的值，请将[“]替换为[']，更正的语法应该类似于

"<%= escape_javascript(image_tag ' +google_map_url+ ')%>"

使用JSON生成图像URL时，escape_javascript打破应用程序

1 个答案: