Question

我试图使用他们的API填充美国宇航局当天的照片。

我已经在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>

Answer 1

这里有一些问题。第一个是你使用$.each()，当只有一个图像回来时。有一个对象......没有什么可以迭代的。不要使用它。

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

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

我将由您决定要设置的其他属性以及设置文本的位置。（顺便说一句，当您设置文本时，请使用.text()方法进行设置。再次，在HTML上下文中连接文本将导致该文本被解释为HTML！

Answer 2

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

你走了。

＆＃13;

x = 20

＆＃13;

$(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
});

＆＃13;

N.B。：使用 console.log（）使用 API 是检查传递数据的更好选择。

Codepen网址：http://codepen.io/arsho/full/ZOXago/

Answer 3

您可以点击网址查看内容。它不会返回一个项目数组，但是您的变量键拼写错误

解释与解释

>>> a = [1, 2, 3, 4]
>>> import itertools
>>> itertools.combinations(a, 2)
<itertools.combinations object at 0x109c276d8>
>>> list(itertools.combinations(a, 2))
[(1, 2), (1, 3), (1, 4), (2, 3), (2, 4), (3, 4)]
>>> list(itertools.combinations(a, 3))
[(1, 2, 3), (1, 2, 4), (1, 3, 4), (2, 3, 4)]
>>> list(itertools.combinations(a, 4))
[(1, 2, 3, 4)]

尝试拉json img时未定义

3 个答案: