将表单数据发送到客户端函数以检索页面标题答案

【问题标题】：Send form data to client side function to retrieve a page title将表单数据发送到客户端函数以检索页面标题
【发布时间】：2016-03-21 22:49:21
【问题描述】：

我正在尝试从客户端 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)
};

【问题讨论】：

如果我正确理解您的问题，您可能有 CORS 问题...如果是这样，请使用 $.ajax() 询问您的服务器...

标签： javascript jquery node.js

【解决方案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>')
};

【讨论】：