gpt4 book ai didi

javascript - jQuery get 函数无法按预期工作

转载 作者:行者123 更新时间:2023-11-28 17:03:11 24 4
gpt4 key购买 nike

我需要使用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 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>

所以,问题是$.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 和控制台获取响应,但不能使用实际代码获取它们?

感谢您的耐心等待!

最佳答案

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

提交将提交表单。而按钮只会处理分配的事件处理程序。

改变

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

关于javascript - jQuery get 函数无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56743226/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com