1

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

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

为了使事情具体化，假设我只想检索正在输入的 url 的标题。

在我的 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”与我的页面控制器中的 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 数据从一个到另一个传递以及我解决这些主题的任何其他资源的任何帮助！我还想知道是否有任何推荐的方法来调试有缺陷的脚本（我的代码显然不起作用，但我不确定从哪里开始寻找错误）。

万分感谢！

4

3 回答 3

4

我知道这是一个老问题，但是我设法使以下代码起作用：

控制器.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'

链接预览.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);
  });
});
于 2013-05-28T09:01:47.067 回答
1

可能想查看我们在 Socialcast 开发的 link_preview gem： https ://github.com/socialcast/link_preview 它为您处理了很多后端处理

于 2014-04-21T18:25:02.493 回答
1

我认为你在正确的轨道上。假设您想从请求的页面返回标题和图像（就像 Facebook 一样），我可能会做这样的事情。

def link_preview
  url = params[:url]
  preview = LinkPreviewParser.parse(url) # returns a Hash
  respond_with(preview) #respond_with converts a hash to JSON
end

然后，为了更干净地组织和测试代码，将解析代码移到一个单独的类中

应用程序/模型/link_preview_parser.rb

class LinkPreviewParser
  def self.parse(url)
    doc = Nokogiri::HTML(open(@url))
    page_info = {}
    page_info[:title] = doc.css(title) # assuming this is right - I didn't check
    # ... more parsing logic if needed ...
    return page_info
  end
end

这将返回一个看起来像这样的 json 对象：{'title': 'Some Webpage'}，它应该很容易在您的 javascript 中处理。您可以根据需要添加其他属性。

我没有对此进行测试，但我相信它应该可以工作。这是最简单的方法，但如果您预计会有大量流量，那么这样做有一个严重的缺点。由于来自浏览器的请求必须等待从服务器到外部网站的另一个请求，因此您将有很多请求只是在无所事事地等待。因此，理想情况下，您希望以异步方式执行此操作。这需要更多的工作，因此请选择目前最适合您的方法。

于 2012-08-07T23:29:06.957 回答