發送表單數據到客戶端功能來檢索頁面標題

我試圖從客戶端的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();')

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

來源

2016-03-21 Rhys Edwards

如果我正確理解你的問題，你可能有CORS問題...... 如果是的話，使用'$阿賈克斯（）'請問您的服務器... – malix

服務器端，讓瀏覽器通過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>') 
};

來源

2016-03-21 14:49:21 malix

發送表單數據到客戶端功能來檢索頁面標題

回答

相關問題