Question

我需要使用GIPHY API获取照片，我具有以下功能：

system("dir")

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

因此，问题在于$ .get（）函数根本不响应，即使always（）回调函数也没有执行。当我在Postman应用程序中尝试此特定URL时，得到响应（json对象），并且可以访问其中的data.images.origianl.url属性。当我在控制台中尝试以下代码行：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en" 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>时，我收到状态码为200的响应，因此它应在main.js文件中有效，但对我而言却不行。

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

是什么问题？

怎么可能我可以使用相同的URL从Postman和控制台获得响应，却没有获得它们的真实代码？

感谢您的耐心！

Answer 1

这是一个常见问题，了解类型按钮和类型提交之间的区别。

提交将提交表格。而按钮将仅处理分配的事件处理程序。

更改

<input type="submit"

到

<input type="button"

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 lang="en" 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="button" id="button" value="GENERATE" onclick="callApi(query)">
            </form>
            <img id="genImage" src="">
        </body>
    </html>

jQuery get函数无法按预期工作

1 个答案: