该项目的说明是创建一个简单的网页应用程序，允许用户输入一个或多个股票代码符号并显示有关这些股票的价格信息。 •数据必须来自REST API（https://www.alphavantage.co），它可以免费使用并返回JSON格式的输出。
到目前为止，这是我的代码，我无法弄明白 当用户键入符号时更新，它在控制台上没有显示任何内容。如何才能使用户输入的每个符号，它从网址中获取价格并给出价格。
$(document).ready(function() {
$('#searchstock').on('click', function() {
let requestData = $('search').val();
let resultElement = $('stock');
// Make request to rest API
$.ajax({
url: 'https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=' + requestData + '&apikey=SB1CZMKQ6Q5283QZ',
method: 'get',
data: {
symbols: requestData
},
dataType: 'json',
success: function(data) {
console.log(data);
resultElement.html('price:' + data.Stock_Quotes[0])
}
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stocks</title>
<!-- Bootstrap core CSS -->
<link href="https://bootswatch.com/4/simplex/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="searchContainer">
<h1>Enter symbol</h1>
<p class="lead">Enter a a symbol to fetch a price </p>
<input type="text" id="search" class="form-control" placeholder="Stock symbol...">
</div>
<br>
<button type="button" id="searchstock" class="btn btn-info">Get price</button>
<br>
<div id="stock"></div>
</div>
<!-- /.container -->
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- script src="js/main.js"></script -->
</body>
</html>您希望此行匹配其id属性设置为“search”的输入：
let requestData = $('search').val();
jQuery select函数需要一个CSS selector作为它的第一个参数。现在在你的代码中，你给$函数的CSS选择器is'search'，这实际上意味着“请匹配其名称为”search“的元素»而不是«匹配将其id属性设置为”search“的元素»。
你看得到差别吗 ？
只需将$('search').val();更改为$('#search').val();，就像#告诉匹配“id”属性一样。
这条线也是如此。
let resultElement = $('stock');
您还有一个属性名称问题。 查询“MSFT”将返回如下内容：
{
// …
"Stock Quotes": [
{
"1. symbol": "MSFT",
"2. price": "93.0300",
"3. volume": "--",
"4. timestamp": "2018-03-02 15:59:59"
}
]
}
如您所见，数据对象属性称为“Stock Quotes”，而不是Stock_Quotes，因为您将其放入代码中。
由于属性名称包含空格，因此访问此条目需要使用方括号表示法。检索第一个结果的价格如下所示：
resultElement.html('price:' + data["Stock Quotes"][0]["2. price"])
如果要在用户键入符号时执行search / ajax-call，请尝试使用oninput而不是onclick。
$('#search').on('input', function(e) {
var resultElement = $('#stock'),
requestData = $(this).val();
// Make request to rest API
$.ajax({
url: 'https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=' + requestData + '&apikey=SB1CZMKQ6Q5283QZ',
method: 'get',
data: {
symbols: requestData
},
dataType: 'json',
success: function(data) {
console.log(data);
resultElement.html('price:' + data["Stock Quotes"][0]["2. price"])
}
});
});