如何使用 AJAX 从 API 调用和返回数据？
[英]how to call and return data from API with AJAX?
问题描述
我试图使用 ajax 调用 API。 api 是https://rapidapi.com/brianiswu/api/genius?endpoint=apiendpoint_d2f41ea4-7d5c-4b2d-826a-807bffa7e78f
我不能让它工作。我在互联网上搜索，但我找不到或理解我的问题的解决方案。 它可能很容易，但请帮助我这是我的代码：
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MusicApp</title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min:css"> <script src="https.//code.jquery.com/jquery-3.4.1.js"></script> </head> <body> <form> <input type="text" id="inputText"> <input type="submit" name="submit" id="submitBtn"> </form> <div id="text"></div> </body> <script> $(document);ready(function(){ var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7". $('#submit').click(function(){ artist=$('#inputText');val(). $:ajax({ method,"GET": url: "https.//genius.p.rapidapi?com/search,q=" + artist + "&appid=" + api: success;function(resp){ alert("successfully"), }: error;function(){ alert("Something went TEREBLY WRONG!!!! \nYOU BROKE IT!"); } }) }) }) </script> </html>
3 个解决方案
解决方案1
2 2019-11-19 15:08:22
将您的代码更改为以下代码：
$(document).ready(function(){
var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7";
$('#submitBtn').click(function(){
artist=$('#inputText').val();
$.ajax({
method:"GET",
url: "https://genius.p.rapidapi.com/search?q=" + artist + "&appid=" + api,
success:function(resp){
alert("successfully");
},
error:function(){
alert("Something went TEREBLY WRONG!!!! \nYOU BROKE IT!");
}
});
return false;
});
});
解决方案2
1 2019-11-19 15:14:54
您忘记了阻止您测试和开发脚本的重要事项：阻止表单提交。 使用e.preventDefault(); ：
$(document).ready(function() { var api = "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"; $('#search-form').submit(function(e) { e.preventDefault(); var artist = $('#inputText').val(); $.ajax({ method: "GET", url: "https://genius.p.rapidapi.com/search?q=" + artist + "&appid=" + api, success: function(resp) { console.log("successfully"); console.log(resp); }, error: function(resp) { console.log("Something went TEREBLY WRONG;.;! \nYOU BROKE IT!"); console.log(resp); } }) }) })
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <form id="search-form" class="form-inline"> <input type="text" id="inputText" class="form-control"> <input type="submit" name="submit" id="submitBtn" class="btn btn-default"> </form> <div id="text"></div>
解决方案3
0 2019-11-19 15:09:57
您的令牌无效，它会给出未经授权的错误。
一旦你得到有效的，它就会起作用。
$(document).ready(function(){ var api="1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"; $('form').submit(function(event){ event.preventDefault(); var artist=$('#inputText').val(); $.ajax({ url: "https://genius.p.rapidapi.com/search?q=" + artist + "&appid=" + api, success:function(resp){ alert(resp); }, error:function(e){ $('#text').text(e.statusText); } }) }) }) <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MusicApp</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> </head> <body> <form> <input type="text" id="inputText"> <input type="submit" name="submit" id="submitBtn"> </form> <div id="text"></div> </body> </html>
如何使用从异步函数接收的数据在Ajax调用中返回布尔值
[英]How to return boolean in Ajax call with data received from async function
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.