为使用API组合参数而苦苦挣扎？
为使用API组合参数而苦苦挣扎？
提问于 2018-06-04 02:03:44
在https://jsfiddle.net/nn2qmc7t/的第63到83行，我在javascript中使用API时遇到了问题，我认为这是参数的合并。我正在尝试通过API输入，这对于这里的文档来说是不友好的，我也不能从网站获得支持：https://newsapi.org/docs基本上，我在这里做错了什么，我如何使从第69行到第75行的所有参数工作？
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- JavaScript that needs to be loaded first -->
<script src="js/moment.min.js"> </script>
<title>feed.football - Quick and easy football news and tables!</title>
</head>
<body class="bodyClass">
<!-- Navbar begin: -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #efefff;">
<a class="navbar-brand" href="index.html">feed.football</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon-custom"><i class="fal fa-futbol fa-1x"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"><i class="fal fa-newspaper fa-1x"></i> News <span class="sr-only">(current)</span></a> <!-- Main news will always be the home page / feed -->
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html"><i class="fal fa-table fa-1x"></i> Tables</a> <!-- Football tables include results -->
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"><i class="fal fa-envelope fa-1x"></i> Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar end. -->
<!-- Main content begin: -->
<div class="text-center">
<h2>Coming Soon!</h2>
<p>Quick and easy football news and tables!</p>
</div>
<!-- Get news data begin: -->
<script>
var todaysDate = moment(todaysDate).format('YYYY-MM-DD');
console.log("Todays date is: " + todaysDate);
var url = 'https://newsapi.org/v2/top-headlines?' +
'category=sport' +
'country=uk&' +
'q=football&soccer' +
'from='+todaysDate+'&sortBy=popularity?'
'sort by relevance&'
'apiKey=6b6384493350490abac2f85fb6f584e2';
var req = new Request(url);
fetch(req)
.then(function(response) {
console.log(response.json());
})
</script>
<!-- Get news data end. -->
<!-- Parse news data to HTML begin: -->
<!-- Parse news data to HTML end. -->
<!-- Main content end. -->
<!-- Footer begin: -->
<footer>
<hr></hr>
<div class="text-center">
<em><p><a target="_blank" href="http://NewsAPI.org">News powered by NewsAPI.org</a></p></em>
<em><p><a target="_blank" href="http://jamie.zone">© <script>document.write(moment(todaysDate).format('YYYY'));</script> - Jamie Cropley</a></p></em>
</div>
</footer>
<!-- Footer end. -->
<!-- Optional JavaScript -->
<script defer src="https://pro.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-d84LGg2pm9KhR4mCAs3N29GQ4OYNy+K+FBHX8WhimHpPm86c839++MDABegrZ3gn" crossorigin="anonymous"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-04 02:17:29
当将大量参数组合到URL查询字符串中时，最好使用函数，否则很容易出错：
function querystring() {
return Object.keys(params).map(function(k) {
return encodeURIComponent(k) + '=' +
encodeURIComponent(params[k]);
}).join('&');
}然后像这样创建一个网址：var url = 'https://newsapi.org/v2/top-headlines?' + querystring({ category: 'sport', country: 'uk', q: 'football&soccer', from: todaysDate, sortBy: 'popularity'...诸若此类
这是另一个错误：
.then(function(response) {
console.log(response.json());
})response.json()实际上是一个用解析后的JSON数据解析的承诺，所以您也需要等待它。
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})Stack Overflow用户
发布于 2018-06-04 02:12:40
好的，你这里有几个问题，不是百分之百确定我可以完全解决你的问题，但应该能够让你走上正确的道路。
var url = 'https://newsapi.org/v2/top-headlines?' +
'category=sport' +
'country=uk&' +
'q=football&soccer' +
'from='+todaysDate+'&sortBy=popularity?'
'sort by relevance&'
'apiKey=6b6384493350490abac2f85fb6f584e2';首先，您只能在URI中使用一个?，因此使用多个URI会导致各种问题。
其次，当使用&作为URI中使用的特殊字符时，您必须小心，在您的情况下，您需要将其转换为%26，除非您的API有在其查询中使用的特殊and运算符。此外，您需要在每个参数之间有一个&，您缺少几个参数。
现在，当我运行这段代码时，我没有得到任何结果，但是正如你所看到的，我得到了200的响应，所以没有错误。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50669440
复制相关文章
相似问题