Rails 使用 jsonp 在 ajax 上将部分渲染为小部件

Question

我在这里查看了很多其他答案，但我仍在努力弄清楚如何设置我的 Rails 小部件。

我的小部件控制器中有这段代码：

  def widget
    status = Company.friendly.find(params[:id]).widget.active
    body = to_json_value(render_to_string('companies/_widget', locals: { profile: self.profile }))

    respond_to do |format|
      format.js { render json: { status: status, html: body }, callback: params[:callback] }
    end
  end

  private

  def to_json_value(str)
    str.gsub!("\"", "\\\"")
    str.gsub!(/\n+/, " ")
    str
  end

self.profile 方法只是设置了传递给部分变量的列表。

我想要做的是给用户一个 Javascript 脚本标签，他们可以将其嵌入到他们的（外部）网站上。当用户点击该页面时，脚本将对小部件控制器进行 AJAX 调用，如果小部件已打开，它将接收要在页面上呈现的 html 字符串。

到目前为止，我已经让小部件控制器返回一个带有状态和 html 字符串的 json 对象。问题是当我将 localhost url 粘贴到 jsonlint.com 时，它说它是无效的。当我将脚本标签插入 html 文件然后在 Chrome 中打开它时，这也得到了证实。我收到一条错误消息，提示有 unexpected token :。所以我改变了我的控制器和 widget.js.erb 以包含一个回调函数。我在控制器中添加了, callback: params[:callback]。

我还在我的 widget.js.erb 文件中设置了一个回调函数（还没有做任何事情）。然后，我使用脚本标记将此文件嵌入到 html 文件中，并将其加载到 Chrome 中。当我这样做时，我收到一条错误消息，指出 showWidget 未定义。

我正在努力寻找解释如何通过 jsonp 从 rails 应用程序加载数据以及回调函数如何发挥作用的资源。

这是我的 widget.js.erb：

function showWidget();

$.ajax({
  type: 'GET',
  url: 'http://localhost:3000/<%= params[:company] %>/widget?callback=?',
  jsonpCallback: 'showWidget',
  contentType: "application/json",
  crossDomain: true,
  dataType: 'JSONP',
  success: function (data) {
    var result = JSON.parse(data);
    $('#company-widget').html(result.html);
  },
  error: function(e) {
    console.log(e.message);
  }
});

这是我的 test.html：

<div id="company-widget"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost:3000/taco-corp/widget.js?callback=showWidget" type="text/javascript"></script>

我也不确定这个 widget.js.erb 脚本应该放在我的 rails 应用程序中的什么位置。到目前为止，这是我的 widget.js.erb 的内容：

Answer 1

我发现了问题所在。我需要向我的 rails 控制器和我的 $.ajax 方法添加一个回调。我没有在我的 ajax 调用中正确设置回调。我还需要指定正确的标头 (contentType) 来解决 HTTP 406 错误。这是下面的工作 jQuery 代码供参考：

$(document).ready(function(){
    var company = 'taco-corp';

    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000/' + company + '/widget.js?callback=?',
        contentType: "application/javascript",
        crossDomain: true,
        dataType: 'JSONP',
        success: function(data) {
            $('#company-widget').html(data.html);
        },
        error: function(e) {
            console.log(e.message);
        }
    });
});

这是我的 Rails 控制器：

  def widget
    status = Company.friendly.find(params[:id]).widget.active

    body = render_to_string('companies/_widget', layout: false, locals: { profile: self.profile })

    respond_to do |format|
      format.js { render json: { status: status, html: body }, callback: params[:callback] }
    end
  end