使用jQuery从url获取API数据的问题[重复]答案

【问题标题】：Problem with getting API data from url using jQuery [duplicate]使用jQuery从url获取API数据的问题[重复]
【发布时间】：2019-07-18 15:40:57
【问题描述】：

我有一个 html 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1.0, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form id="formGIT">
        <input type="text" name="GitHubUsername" id="GitHubUsername">
        <input type="submit" value="Submit">
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

在 scripts/app.js 中，我想要的是使用 jQuery 在变量中获取 github-api 数据。为此，我已经尝试过，

var githubAPIMainStream = null;
var url = null;

$(document).ready(function(){
    $('#formGIT').on('submit', function(e){
        var githubusername = $('#GitHubUsername').val();
        url = 'https://api.github.com/users/'+githubusername;

        $.getJSON(url, function(data) {
            githubAPIMainStream = data;
        });

        alert(githubAPIMainStream);
    });
});

但是，我在 githubAPIMainStream 变量中得到的是一个空值。如果有人告诉我出了什么问题，这将很有帮助。

【问题讨论】：

@freedomn-m 我真的很喜欢这个比喻！我将来可能会使用它...
好的，当您解决表单正在发布的问题后，上面的副本将生效，因为您需要从 on(submit) 处理程序中输入 return false - 如果您按回车键用户名字段，然后可能重复：stackoverflow.com/questions/1370021/…

标签： javascript jquery html json api

【解决方案1】：

$.getJSON 从 URL 中检索数据，然后将其作为“数据”传递给回调函数，然后您需要在该函数中使用它。在你声明 githubAPIMainStream = data 的地方，你需要事后提醒它。

var githubAPIMainStream = null;
var url = null;

$(document).ready(function(){
    $('#formGIT').on('submit', function(e){
        var githubusername = $('#GitHubUsername').val();
        url = 'https://api.github.com/users/'+githubusername;

        $.getJSON(url, function(data) {
            githubAPIMainStream = data;
            alert(githubAPIMainStream);
        });
    });
});

编辑在没有表单提交的情况下工作 sn-p

var githubAPIMainStream = null;
var url = null;

$(document).ready(function(){
    //$('#formGIT').on('submit', function(e){
        var githubusername = "shunjid"; //$('#GitHubUsername').val();
        url = 'https://api.github.com/users/'+githubusername;

        $.getJSON(url, function(data) {
            githubAPIMainStream = data;
            console.log(githubAPIMainStream);
        });
    //});
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我以前试过这个。它仍然是一个空值。并且还寻找其他解决方案来避免它重复。 @freedomn-m
@Shunjid 如果您在他的答案中尝试了代码（在回调中带有警报），那么结果（data）为 null。您是否有一个应该返回结果的示例用户名？
例如，如果我将 octocat 放在输入字段中，那么 url 应该是api.github.com/users/octocat。在浏览器中，url 返回某种数据。我不知道为什么它在我的代码中不起作用。即使输入字段值在代码中也不为空:-( @freedomn-m