jQuery get 函数无法按预期工作

我需要使用 GIPHY API 获取照片,我有以下功能:


function callApi(input) {

    var url1 = `https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=${input.value.toLowerCase()}&limit=1`;

    var url2 = "https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=dog&limit=1";

    var xhr = $.get(url2);

    xhr.done(function(jsonObj) {

        alert("Success!");

        document.getElementById("genImage").src = jsonObj.data.images.original.url;

    }).fail(function() {

        alert("erro");

    }).always(function() {

        alert("...");

    })

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>

    <html dir="ltr">

        <head>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

            <script type="text/javascript" src="main.js"></script>

            <meta charset="utf-8">

            <title>Test</title>

        </head>

        <body>

            <form id="query-form">

                <label for="query">KEYWORD</label>

                <input name="query" type="text">

                <input type="submit" id="button" value="GENERATE" onclick="callApi(query)">

            </form>

            <img id="genImage" src="">

        </body>

    </html>

所以,问题是 $.get() 函数根本没有响应,甚至 always() 回调函数也没有被执行。当我在 Postman 应用程序中尝试这个特定的 URL 时,我得到了响应(json 对象),我可以访问它在那里的 data.images.origianl.url 属性。当我在控制台中尝试以下代码行时:$.get("https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=dog&limit=1");我得到状态代码为 200 的响应,因此它应该在 main.js 文件中工作,但在我的情况下它没有。

我有两个变量 url1 和 url2,这是因为,在我的第一次尝试中,我没有使用 url1 获得任何结果,但是使用 url2 获得了成功。一段时间后,我没有得到任何使用其中的两个。

问题是什么?我怎么能使用相同的 URL 从 Postman 和控制台获得响应,但没有使用实际代码获得它们?

感谢您的耐心等待!


吃鸡游戏
浏览 193回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript