IE 8 在使用 jQuery BBQ 重新加载页面时显示原始 ajax 响应

Posted 2023-04-13

【中文标题】IE 8 在使用 jQuery BBQ 重新加载页面时显示原始 ajax 响应

【英文标题】：IE 8 shows raw ajax response on page reloading with jQuery BBQ

【发布时间】：2011-09-05 21:32:52

【问题描述】：

我在分页链接上使用 Ben Almans 的 jQuery BBQ 和 jQuery hashchange 插件。两者都在 Opera 和 Firefox 中按预期工作，但在 IE 8 中却没有（很惊讶，嗯？）。 IE 也适用于 ajax、后退按钮和 hashchange，但是当我单击重新加载按钮并显示 raw ajax 响应而不是在先前加载的页面中运行它时失败。

所以这是我的丑陋代码和一些关于我试图在我的分页中实现的功能的解释：

1) 搜索引擎友好链接（服务器响应 html 或 js，具体取决于客户端的 javascript 可用性）。

2) 开启JS时动态改变url（使用'#'符号）。

3) 历史记录和后退按钮支持。

4) 最小化双重请求（如果相同的内容与 html 页面一起加载，则不要发出 ajax 请求）。

JS：

$(function ($) 
  if (ajax_init) 
    $('.pagination a').live("click", function () 
      $.bbq.pushState(page: $.deparam.querystring($(this).attr('href')).page);
      return false;
    );
    $(window).bind("hashchange", function(e) 
      var anchor = $.deparam.fragment().page;
      var query = $.deparam.querystring().page;
      if (ajax_load(anchor, query)) 
        $(ajax_div).css('opacity', '0.4');
        $(ajax_div + '-processing').removeClass('hidden');
        $.ajax(
          type: 'GET',
          url: $.param.querystring('', page: anchor),
          dataType: 'script',
          cache: false
        );
      
    );
    $(window).trigger('hashchange');
  
);

function ajax_load(anchor, query) 
  if ((anchor && anchor !== query && !(!query && anchor == 1)) || $('#noscript').length < 1) 
    return true;
  
  else 
    return false;
  

模板（Rails 视图）：

<div id="products-container" >

  <div id="products-processing" class="hidden">
    <%= image_tag "spinner.gif" %>
  </div>

  <div id="products">

    <div id="noscript">
      <%= render "products_list.erb" %>
    </div>

    <script type="text/javascript">
      var ajax_init = true;
      var ajax_div = '#products';
      var anchor = $.deparam.fragment().page;
      var query = $.deparam.querystring().page;
      if (!ajax_load(anchor, query)) 
        url = anchor ? anchor : (query ? query : 1);
        $.bbq.pushState(page: url);
      
      else 
        $('#noscript').hide();
        $('#products-processing').removeClass('hidden');
      
    </script>

  </div>

  <div id="products-min-height"></div>

</div>

AJAX 模板（Rails js 视图）：

$('#products').html('<%= escape_javascript(render "products_list") %>').css('opacity', '1');

UPD： IE 在刷新时不发送请求类型标头（或 Rails 无法确定）。所以 Rails 生成的是 JS 视图而不是 HTML。解决者：

  respond_to do |format|
    request.format.js? ? (format.js render :index) : (format.html render :index)
  end

有没有更好的解决方案？

【参考方案1】：

IE 似乎在刷新时要求输入“*/*”，Rails 似乎认为 javascript 是比 html 更好的响应。因为刷新应该只发生在 html 上，告诉 rails “*/*”意味着 html 修复了这个问题：

 before_filter :set_request_type
 ...
 protected    

 def set_request_type
   request.format = :html if request.format == "*/*"
 end

【讨论】：

您先生，真是个天才。可能有用的是注意这必须放在application_controller.rb。

【参考方案2】：

我在 IE8 上遇到了同样的问题。我的控制器提供 JS 和 HTML 响应。 对我来说，确保首先在代码中注明 html 格式块解决了这个问题：

这不起作用，因为 rails 使用 js 模板进行响应：

respond_to do |format|
  format.js
  format.html
end

但是这很好用：

respond_to do |format|
  format.html
  format.js
end