Question

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

我在widget控件中有这个代码：

  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调用，如果窗口小部件打开，它将接收要在页面上呈现的字符串。

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

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

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

这是我的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

Rails使用jsonp将部分渲染为ajax上的widget

1 个答案: