jquery - 使用 JQuery 和 Rails 生成链接预览

Question

我感兴趣的是在 JQuery 和 RoR 中实现链接预览工具的基本版本(类似于 Facebook 的)。用户在输入字段中键入 URL。 jquery 函数监视输入的内容(使用 keyup)，当输入有效的 url 时(用户无需提交任何内容)，jquery 函数调用 Rails 函数，该函数使用 Nokogiri gem 搜索并返回预览内容(例如标题) 、任何图像等)。然后该内容返回到 jquery 函数并显示在输入框下方。

在这一切中，我不清楚数据是如何从 jquery 函数传递到 Rails 函数并返回的。

为了让事情具体化，假设我只想检索正在键入的网址的标题。

在我的 JQuery 函数中，我使用 keyup 来监视空格、回车等内容。此时，我没有验证输入的 url(我可以稍后验证)

var text; 

$("#text").keyup(function(e) {

    if(e.which == 13 || e.which == 32 || e.which == 17 || ) {

        text = $("text").val();
        $.get('/linkPreview', {text: text}, function(answer) {

            $("previewTitle").html(answer);
        }           
            )
    }

这是我不确定如何继续的地方。我正在使用 .get Jquery 方法(这是正确的方法吗？)来调用 Rails 函数，并将文本作为键入的 url 传递。

然后，我将“/linkPreview”与我的页面 Controller 和路由文件中的 linkPreview 操作进行匹配:

match '/linkPreview', :to => 'pages#linkPreview'

我也不确定如何在 Rails 函数中读取和传递 JSON 数据。我正在尝试使用 respond_to 和 respond_with 函数，但不确定这是否正确(我使用 Nokogiri gem 从 url 的 html 中提取标题):

def linkPreview
    respond_to :json
@url = params[:text]
doc = Nokogiri::HTML(open(@url))
@title = doc.css(title)
respond_with(@title)
end

由于我是 RoR 和 JQuery 的新手，因此我非常感谢任何有关从 JQuery 调用 Rails 函数的正确方法、将 JSON 数据从一个传递到另一个的帮助，以及我解决这些主题的任何其他资源!我还想知道是否有任何推荐的方法来调试有缺陷的脚本(我的代码显然不起作用，但我不知道从哪里开始寻找错误)。

非常感谢!

Answer 1

我知道这是一个老问题，但是我设法让以下代码正常工作:

Controller .rb

def linkpreview
    url = params[:url]
    preview = LinkPreviewParser.parse(url) # returns a Hash
    respond_to do |format|
        format.json { render :json => preview }
    end
end

应用程序/模型/link_preview_parser.rb

class LinkPreviewParser
  def self.parse(url)
    doc = Nokogiri::HTML(open(url))
    page_info = {}
    page_info[:title] = doc.css('title').text
    return page_info
  end
end

路线.rb

match '/linkpreview', to: 'items#linkpreview'

linkpreview.js

$(document).ready(function() {
  $("#url-submit").on('click', function() {
    var link = $("#url");
    setTimeout(function() {
      var text = $(link).val();
      // send url to service for parsing
      $.ajax('/linkpreview', {
        type: 'POST',
        dataType:'json',
        data: { url: text },
        success: function(data, textStatus, jqXHR) {
          $("#item_title").val(data['title']);
        },
        error: function() { alert("error"); }
      }); 
    }, 100);
  });
});