Jquery 尝试提取json img时未定义_Jquery_Ajax

Jquery 尝试提取json img时未定义

jquery ajax

Jquery 尝试提取json img时未定义,jquery,ajax,Jquery,Ajax,我正试图用NASA的API将当天的照片填充到一个div中我已经在jQuery中编写了AJAX请求，但是当我执行该函数时，我只会得到指向undefined 我的功能缺少什么 $(document).ready(function() { $('form').submit(function(evt) { evt.preventDefault(); //AJAX var url = "https://api.nasa.gov/planetary/

我正试图用NASA的API将当天的照片填充到一个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
});

$（文档）.ready（函数（）{
$（'form'）。提交（函数（evt）{
evt.preventDefault（）；
//阿贾克斯
变量url=”https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw"
函数nasaData（数据）{
var photoHTML=''；
$。每个（数据、功能（i、照片）{
photoHTML+=''；
});
photoHTML+=“”；
$（'#photos'）.html（photoHTML）；
}
$.getJSON（url，nasaData）；
})；//结束事件提交
});

加价

<!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>


测试对FlickerAPI的访问
欢迎使用API搜索测试。
使用下表搜索基于API的开放式NASA。

这里有一些问题。第一种情况是，您使用的是

$.each（）

，此时只有一个图像返回。只有一个物体。。。没有什么可重复的。不要用它

下一个问题是，您只是将数据连接到HTML中。这样做，您可能会创建无效的HTML，甚至可能会有代码注入页面的风险。相反，您应该创建元素并设置其属性。请尝试以下方法：

$.getJSON('https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw').then(function(data) {
  $('.photos').append(
    $('<img>').attr('src', data.hdurl)
  );
})

$.getJSON（'https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw）。然后（函数（数据）{
$（'.photos'）。追加(
$('
我将让您决定设置哪些其他属性，以及在何处设置文本。（顺便说一下，当您设置文本时，请使用.text（）
方法进行设置。同样，在HTML上下文中连接文本将导致该文本被解释为HTML！
您可以点击URL查看内容。它不会返回项目数组，但您的变量键拼写错误
解释与解释
a.href = photo.hdurl (highdef)
a.alt = photo.title
p = photo.explanation
img.src = photo.url (not copyright)

无需使用$.each（），因为所有内容都已包含在数据参数中
给你

$（文档）.ready（函数（）{
$（'form'）。提交（函数（evt）{
evt.preventDefault（）；
//阿贾克斯
变量url=”https://api.nasa.gov/planetary/apod?api_key=KmKClvkvdi3Ug54cIAhw8sd43XnYVitmTz2lAjGw"
函数nasaData（数据）{
var photoHTML=''；
photoHTML+=''；
photoHTML+=“”；
$（'#photos'）.html（photoHTML）；
}
$.getJSON（url，nasaData）；
})；//结束事件提交
})；

测试对FlickerAPI的访问
欢迎使用API搜索测试。
使用下表搜索基于API的开放式NASA。
我想您需要在服务器端请求json，我看不到任何CORS头访问控制允许源代码：*允许您在浏览器内执行请求。@progysm CORS在这里不是问题。无论引用的域是什么，服务器确实正确返回了访问控制允许源代码。
。您的代码处于危险状态将任意数据输入HTML。