jQuery get函數無法按預期工作
[英]jQuery get function doesn't work as expected
問題描述
我需要使用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和控制台獲得響應，卻沒有使用實際代碼獲得響應？
感謝您的耐心等待！
1 個解決方案
解決方案1
3 已采納 2019-06-24 20:08:39
了解類型按鈕和類型提交之間的區別是一個常見的問題。
提交將提交表格。 而按鈕將僅處理分配的事件處理程序。
更改
<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 add函數無法按預期工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.