我正在尝试使用他们的 API 将 NASA 当天的图片填充到 div 中。
我已经用 jQuery 编写了 AJAX 请求，但是当我执行该函数时，我只获得了指向 undefined 的链接
我的函数缺少什么？
$(document).ready(function() {
$('form').submit(function(evt) {
evt.preventDefault();
//AJAX
var url = "https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw"
function nasaData(data) {
var photoHTML = '<div>';
$.each(data, function(i, photo) {
photoHTML += '<a href="' + photo.url + '">';
photoHTML += '<p>"' + photo.explaination + '"</p>'
photoHTML += '<img src="' + photo.copyright + '"> </a>';
});
photoHTML += "</div>";
$('#photos').html(photoHTML);
}
$.getJSON(url, nasaData);
}); //end eventsubmit
});
标记
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="flicker.css">
<title>Testing Access to Flicker API</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="flicker.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Welcome to the API search test.</h1>
<h4 class="text-center">Use the form below to search the open NASA API based.</h4>
<form>
<div class="col-sm-4 form-group">
<input type="submit" class='button' />
</div>
</form>
</div>
<div id="photos"></div>
</body>
</html>
最佳答案
无需使用$.each()，因为所有内容都已在data参数中。
给你。
$(document).ready(function () {
$('form').submit(function (evt) {
evt.preventDefault();
//AJAX
var url = "https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw"
function nasaData(data) {
var photoHTML = '<div>';
photoHTML += '<a href="' + data.hdurl + '">';
photoHTML += '<p>"' + data.title + '"</p>';
photoHTML += '<img src="' + data.hdurl + '"> </a>';
photoHTML += "</div>";
$('#photos').html(photoHTML);
}
$.getJSON(url, nasaData);
}); //end eventsubmit
});<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="flicker.css">
<title>Testing Access to Flicker API</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="flicker.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Welcome to the API search test.</h1>
<h4 class="text-center">Use the form below to search the open NASA API based.</h4>
<form>
<div class="col-sm-4 form-group">
<input type="submit" class='button' />
</div>
</form>
</div>
<div id="photos">
</div>
</body>
</html>注意:使用 console.log() 来使用 API 是检查传递数据的更好选择。
Codepen 网址:http://codepen.io/arsho/full/ZOXago/
关于jquery - 尝试拉取 json img 时未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38288713/