如何用AJAX调用API并返回数据？Genius API调用故障求助

我仔细看了你的代码，发现几个关键问题导致调用失败，咱们一个个来修复：

1. 按钮选择器匹配错误 #

你的提交按钮id是submitBtn，但JS里写的是$('#submit')——根本找不到这个元素，点击事件自然没触发！把选择器改成$('#submitBtn')就能解决这个问题。

2. 未阻止表单默认提交行为 #

点击提交按钮后，浏览器会默认刷新页面，AJAX请求还没完成页面就重启了，你当然看不到结果。要在点击事件里加event.preventDefault()来阻止这个默认行为。

3. RapidAPI请求参数格式错误 #

Genius的RapidAPI接口不是把API Key放在URL的appid参数里，而是必须在请求头里设置X-RapidAPI-Key和X-RapidAPI-Host这两个字段。你现在的URL写法完全不符合接口要求，这是最核心的问题。

4. 变量未声明导致全局污染 #

代码里的artist没有用let/const声明，会变成全局变量，这是不好的编程习惯，建议补上声明。

修正后的完整代码 #

<!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(){ 
    const apiKey = "1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7"; 
    const apiHost = "genius.p.rapidapi.com";

    $('#submitBtn').click(function(event){ 
        // 阻止表单默认提交刷新行为
        event.preventDefault();
        const artist = $('#inputText').val(); 

        $.ajax({ 
            method: "GET", 
            url: `https://genius.p.rapidapi.com/search?q=${artist}`, 
            headers: {
                "X-RapidAPI-Key": apiKey,
                "X-RapidAPI-Host": apiHost
            },
            success:function(resp){ 
                alert("API调用成功！");
                // 可以在这里把响应数据展示到页面，比如：
                // $('#text').text(JSON.stringify(resp, null, 2));
            }, 
            error:function(xhr, status, error){ 
                // 错误时打印详细信息方便排查
                alert(`出错了：${status} - ${error}\n状态码：${xhr.status}`);
            } 
        }); 
    }); 
}); 
</script> 
</html>

额外提示 #

• 千万别把你的API Key公开分享到网上，不然可能会被别人滥用哦！
• 如果还是遇到错误，可以在error回调里打印xhr.responseText，看看API返回的具体错误信息，这样更容易定位问题。

内容的提问来源于stack exchange，提问作者user12398352