Question

我有一个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 变量中得到的是null。如果有人告诉我出了什么问题，那将会很有帮助。

Answer 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);
        });
    });
});

EDIT （无需提交表单）的工作摘录

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);
        });
    //});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用jQuery从网址获取API数据时出现问题

1 个答案: