使用Reqwest.js获取twitter和facebook的分享

Get twitter and facebook shares using Reqwest.js

本文关键字：facebook 分享 twitter Reqwest js 获取 使用      更新时间：2023-09-26

对于ajax请求，我使用Reqwest.js，因为我根本不使用jQueryhttps://github.com/ded/reqwest

看起来Reqwest支持jsonp请求，但是我遇到了一些问题。

下面是我使用jQuery获取facebook和twitter共享的代码:

  // facebook
  $.ajax({
    url: 'http://graph.facebook.com/http://google.com',
    type: 'GET',
    dataType: 'JSONP'
  }).always(function(data) {
    if (data.shares) {
      alert(data.shares);
    }
  });
  // twitter
  $.ajax({
    url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://google.com',
    type: 'GET',
    dataType: 'JSONP'
  }).always(function(data) {
    if (data.count) {
      alert(data.count);
    }
  });

jQuery代码运行良好，jsonp工作正常

下面是我用于Reqwest.js (jQuery替代ajax请求)的代码:

// facebook
reqwest({
  url: 'http://graph.facebook.com/http://google.com',
  type: 'JSONP',
  complete: function(data) {
    var response = parse(data.response);
    if (data.response && response.shares) {
      count.facebook = response.shares;
    }
    update('fb');
  }
});
// twitter
reqwest({
  url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://google.com',
  type: 'JSONP',
  complete: function(data) {
    var response = parse(data.response);
    if (data.response && response.count) {
      count.tw = response.count;
    }
    update('tw');
  }
});

Facebook代码在这里运行良好，这是一个演示http://jsbin.com/jaxuniya/1/edit?html,js,console,output

Twitter代码返回几个错误，下面是一个示例http://jsbin.com/tadejayi/1/edit?html,js,output

看起来jsonp不像预期的那样工作，我以错误的方式使用它吗?

这里有一个错误文本:

加载资源失败:服务器响应的状态是501(未实现)http://urls.api.twitter.com/1/urls/count.json?url=http://google.com

加载资源失败:没有'Access-Control-Allow-Origin'标头出现在请求的资源上。原产地"http://jsbin.com"是因此不允许进入。http://urls.api.twitter.com/1/urls/count.json?url=http://google.com

XMLHttpRequest无法加载http://urls.api.twitter.com/1/urls/count.json?url=http://google.com.请求的文件中没有"Access-Control-Allow-Origin"标头资源。因此，不允许访问原点' http://jsbin.com '。1:1

Uncaught SyntaxError: Unexpected end of input 1:1 (JSON.parse)

我如何解决这个问题?

错误检查说的太明显了:

加载资源失败:服务器响应状态为501(未实现)http://urls.api.twitter.com/1/urls/count.json?url=http://google.com

  • 似乎服务器无法消化请求方法，我似乎是合理的，因为你确实用jQuery方法type: 'GET'指定了请求类型，但用你的Reqwest方法你没有。作为一种解决方案，第一个库视图显示您需要添加method: 'get':

    //facebookreqwest ({url: google.com http://graph.facebook.com/http://,方法:"得到",类型:"JSONP",完成:function(data) {Var response = parse(data.response);如果(数据)。反应,,response.shares) {计数。Facebook = response.shares;}更新(fb);}});

XMLHttpRequest无法加载http://urls.api.twitter.com/1/urls/count.json?url=http://google.com。请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问源'http://jsbin.com'。1:1

  • 您正在尝试实现跨域请求，并且用于jQuery代码，因为您指定了dataType与jsonp作为值。试试以下命令:

    // twitter
reqwest({
  url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://google.com',
  type: 'JSONP',
  jsonpCallback: 'url',
  jsonpCallbackName: 'http://google.com',
  complete: function(data) {
    var response = parse(data.response);
    if (data.response && response.count) {
      count.tw = response.count;
    }
    update('tw');
  }
});
相关文章：