【问题标题】:How to send an HTTP request with a header parameter?如何发送带有标头参数的 HTTP 请求?
【发布时间】:2016-03-23 01:02:04
【问题描述】:

总的来说,我对 javascript 和 Web 编程非常陌生,我需要一些帮助。我有一个 HTTP 请求,我需要通过 javascript 发送并需要将输出存储在一个变量中。我尝试只使用通话网址:

https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015

但它返回一个身份验证错误,因为我没有发送我的 API 密钥,并且它没有告诉我如何仅在 URL 中执行此操作。 API 密钥被列为标头而不是参数,我不确定如何处理。我尝试使用 XMLHttpRequest() 类,但我不太确定我完全理解它的作用,也不能让它工作。

实际的 HTTP 请求

GET https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015 HTTP/1.1
Host: api.fantasydata.net
Ocp-Apim-Subscription-Key: ••••••••••••••••••••••••••••••••

我只需要弄清楚如何将该请求与密钥一起发送,以及如何将它返回的 JSON 文档存储为 javascript 中的变量。

编辑:这是我目前所拥有的:

function testingAPI(){
var key = "8a1c6a354c884c658ff29a8636fd7c18";
httpGet("https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015",key    );
alert(xmlHttp.responseText);
var x = 0;
}

function httpGet(theUrl,key)
{
var xmlHttp = new XMLHttpRequest();

xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.setRequestHeader("Ocp-Apim-Subscription-Key",key);
xmlHttp.send( null );
return xmlHttp.responseText;
}

谢谢!

【问题讨论】:

  • 您的代码发送请求在哪里?
  • 抱歉,刚刚添加!

标签: javascript json api http callback


【解决方案1】:

如果它说 API 密钥作为标头列出,您很可能需要在 http 请求的 headers 选项中设置它。通常是这样的:

headers: {'Authorization': '[your API key]'}

这是另一个Question的示例

$http({method: 'GET', url: '[the-target-url]', headers: {
  'Authorization': '[your-api-key]'}
});

编辑:刚刚看到您想将响应存储在变量中。在这种情况下,我可能只使用 AJAX。像这样:

$.ajax({ 
   type : "GET", 
   url : "[the-target-url]", 
   beforeSend: function(xhr){xhr.setRequestHeader('Authorization', '[your-api-key]');},
   success : function(result) { 
       //set your variable to the result 
   }, 
   error : function(result) { 
     //handle the error 
   } 
 }); 

我从this question 得到这个,我正在工作,所以我目前无法测试它,但看起来很可靠

编辑 2: 很确定您应该能够使用这一行:

headers: {'Authorization': '[your API key]'},

而不是第一次编辑中的beforeSend 行。这对你来说可能更简单

【讨论】:

  • 这是有道理的,但我如何将其合并到我的 javascript 文件中?
  • 正在按照您的评论编辑我的答案,希望可以澄清一些事情。您可以将该 AJAX 请求放在需要获取 JS 文件中信息的任何位置。我个人喜欢将它们放在自己的功能中
  • 我现在就试试!非常感谢
  • 而不是使用 beforeSend 很确定你可以使用我答案顶部的标题行。这可能更容易,我也会将其添加到答案的底部
【解决方案2】:

用你自己的代码和一个轻微的改变而不用jQuery,

function testingAPI(){ 
    var key = "8a1c6a354c884c658ff29a8636fd7c18"; 
    var url = "https://api.fantasydata.net/nfl/v2/JSON/PlayerSeasonStats/2015";
    console.log(httpGet(url,key)); 
}


function httpGet(url,key){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.setRequestHeader("Ocp-Apim-Subscription-Key",key);
    xmlHttp.send(null);
    return xmlHttp.responseText;
}

谢谢

【讨论】:

  • 这个答案需要付出非常小的努力。我不知道您从问题中的代码中更改了什么或为什么。请在以后更清楚地回答您的问题,并说明任何更改的原因。
  • [弃用] 主线程上的同步 XMLHttpRequest 已弃用,因为它会对最终用户的体验产生不利影响。如需更多帮助,请查看xhr.spec.whatwg.org
猜你喜欢
  • 2016-11-10
  • 2011-09-20
  • 1970-01-01
  • 2015-02-22
  • 2017-02-07
  • 2015-12-27
  • 1970-01-01
  • 2016-10-25
  • 1970-01-01
相关资源
最近更新 更多