フォームデータをクライアント側の関数に送信してページタイトルを取得する

Question

クライアント側のURLのメタデータからタイトルを取得しようとしています（FB/Twitterにリンクを貼り付けるのと同じように） 。しかし、私は入力からURLをロードし、まだフォームを送信せずにconsole.logで読むために関数にデータを送るのには苦労しています。

ジェイド

form(method='post' action='/submit', class='plans', id='plans') 
     .form-group 
     label Do you have a link? 
     input.form-control(name='link', type='url', required='required', onchange='scrapeMetadata();', onkeyup='this.onchange();', onpaste='this.onchange();', oninput='this.onchange();') 

JS

function scrapeMetadata(link) { 
    var url = link; 
    console.log(url) 
}; 

Answer 1

サーバー側では、ブラウザはAJAX経由でURLを送信して、それを表示しています。このフィドルで 同様：https://jsfiddle.net/mo0qa8yk

function getTitle(url) { 
    try { 
    return new window.URL(url).host; 
    } catch(ex) { 
    console.error(ex); 
    return 'N/A'; 
    } 
} 

window.scrapeMetadata = function() { 
    var url = $('#url').val(); 
    $.ajax({ 
    type: 'GET', 
    url: '//jsfiddle.net/echo/jsonp/', 
    data: { 
     url: url, 
     title: getTitle(url) //cheat , the server sould return {title:'...'} 
    }, 
    async: false, 
    jsonpCallback: 'jsonCallback', 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: show_response, 
    error: function(e) { 
     console.error(e.message); 
    } 
    }); 

}; 



show_response = function(obj) { 
    var result = $('#post'); 
    result.html(""); 
    result.append('<li>' + obj.title + '</li>') 
};