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>')
};

将表单数据发送到客户端功能以检索页面标题

1 个答案: