1

私が興味を持っているのは、JQueryとRoRにリンクプレビューツールの基本バージョンを実装することです（Facebookにあるものと同様です）。ユーザーが入力フィールドにURLを入力します。jquery関数は（キーアップを使用して）入力された内容を監視し、有効なURLが入力されると（ユーザーが何も送信せずに）、jquery関数はrails関数を呼び出します。この関数は、Nokogirigemを使用してプレビューコンテンツ（タイトルなど）を検索して返します。 、任意の画像など）。その後、そのコンテンツはjquery関数に返され、入力ボックスの下に表示されます。

このすべてについて私が不明確なのは、データがjquery関数からレール1とその逆にどのように渡されるかです。

具体的には、入力しているURLのタイトルを取得したいとします。

JQuery関数では、キーアップを使用してスペースやリターンなどを監視しています。この時点では、入力された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関数を使用しようとしていますが、これが正しいかどうかわかりません（URLのhtmlからタイトルを抽出するためにNokogiri gemを使用しています）：

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

これは古い質問であることは知っていますが、次のコードを機能させることができました。

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);
  });
});
于 2013-05-28T09:01:47.067 に答える