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字符串。

到目前為止，我已經有了widget控制器以返回帶有狀態和html字符串的json對象。 問題是當我將localhost URL粘貼到jsonlint.com時，它說這是無效的。 當我將腳本標記插入html文件，然后在Chrome中打開它時，也可以確認這一點。 我收到一個錯誤消息，說有一個unexpected token : 。 因此，然后我更改了控制器和widget.js.erb以包含回調函數。 我在控制器中添加了, callback: params[:callback] 。

我還在我的widget.js.erb文件中設置了一個回調函數（尚未執行任何操作）。 然后，我使用腳本標簽將該文件嵌入html文件中，然后將其加載到Chrome中。 當我這樣做時，我收到一條錯誤消息， showWidget未定義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