簡體   English   中英

Rails 5 / Ruby - Pull og:來自外部URL的數據,用於在粘貼鏈接時填充表單字段

[英]Rails 5/Ruby - Pull og:data from external URL to populate form fields when link is pasted

我有一個表單,允許用戶創建一個新的帖子。 第一個字段是url字段。 我希望用戶能夠粘貼外部網址,然后使用外部網址的開放圖形/元數據中的圖像/標題/說明預填充下面的表單。 基本上,當您向Facebook發布URL時,會生成“共享卡”。

我基本上復制了這個答案中陳述的內容,但它不起作用: 如何使用Ruby on Rails 5將數據從URL拉入表單

我正在努力弄清楚如何解決它以及如何添加圖像(我正在使用paperclip gem)。 這是我到目前為止所得到的

url_grabber_controller.erb

require 'mechanize'
class UrlGrabberController < ApplicationController
    def grab
        pasted_url = params.fetch("pasted_url")
        page = agent.get(pasted_url)
        title = page.title
        node = page.at("head meta[name='description']")
        description = node["content"]
        render json: {title: title, description: description}
    end
end

_form.html.erb

// Form Fields

<script>
$("#link_url").on("paste", function(e) {
 $.ajax({
  url: "/url-grabber/grab",
  data: $("#link_url").val(),
  success: function(result) {
    $("#title").val(result["title"]);
    $("#description").val(result["description"]);
  }
 });
});
</script>

的routes.rb

Rails.application.routes.draw do
  get "url-grabber/grab" => "url_grabber#grab"
end

非常感謝幫助!

我最終使用Nokogiri寶石解決了這個問題。 這提供了一種可行的解決方案,但對於完整的解決方案,它需要具有無og屬性的站點的回退方法。

fetch_url_controller.erb

require 'open-uri'
require 'nokogiri'

class FetchUrlController < ApplicationController
  def grab
    url = params.fetch("url")
    doc = Nokogiri::HTML(open(url))

    title = doc.at('meta[property="og:title"]')['content']
    description = doc.at('meta[property="og:description"]')['content']
    img_url = doc.at('meta[property="og:image"]')['content']

    render json: {title: title, description: description, image: img_url}
  end
end

jQuery的

$('#link_url').on('input', function(e) {
  var url = $('#link_url').val();
    $.ajax({
      url: "/fetch-url/grab?url="+url,
      success: function(result) {
      $('.js-share-data').html('<h1>'+result["title"]+'</h1><p>'+result["description"]+'</p><img src="'+result["image"]+'">');
  }
  });
});

的routes.rb

get "fetch-url/grab" => "fetch_url#grab"

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM