使用JavaScript根据用户名搜索GitHub用户无数据返回如何解决

核心问题点 #

• 未绑定搜索按钮的点击事件：现有请求逻辑写在$(function(){})页面DOM加载完成回调里，仅页面加载时执行一次，此时输入框为空，点击搜索按钮不会触发任何请求逻辑
• 变量引用错误：getJSON请求成功后返回的用户数据存在data参数中，原代码错误使用输入框取值得到的字符串变量user读取login、avatar_url等用户属性，必然拿不到有效数据
• 可选优化：location字段直接写死为固定值，未读取接口返回的真实地址信息

修复后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $(function(){
                // 绑定搜索按钮点击事件
                $('button').click(function(){
                    var user = $('#search').val().trim();
                    if(!user) {
                        $('#results').empty().append('<p>请输入要搜索的用户名</p>');
                        return;
                    }
                    $.getJSON("https://api.github.com/users/" + user)
                        .done(function(data) {
                            var br = "<br>";
                            var p = $("<p id='users'></p>");
                            // 所有属性从返回的data变量中读取
                            var name = "Username: " + data.login + br;
                            var pic = "Avatar Picture:" + br + "<img src='"+data.avatar_url+"'/>" +br;
                            var homeURl = "Homepage URL: "+"<a href='"+data.html_url+"'>"+data.html_url+"</a>" +br;
                            // 读取真实location，为空则显示Null
                            var location = "Location: "+ (data.location || "Null") +br;
                            var admin = "Admin: "+ data.site_admin;
                            p.append("<p>"+ name  + pic + homeURl + location + admin +"</p>");
                            $("#results").empty().append(p);
                        })
                        .fail(function(jqXHR) {
                            console.log("Error: " + jqXHR.status);
                            $('#results').empty().append('<p>搜索失败，用户不存在或接口请求受限</p>');
                        })
                        .always(function() {
                            console.log("Github User Request finished");
                        });
                })
            });
        </script>
    </head>
    <body> 
        <input id="search" type = "text">
        <button>Search</button>
        <div id="results"></div>
    </body>
</html>

通用排查思路 #

• 先打开浏览器开发者工具（F12）的控制台面板，查看是否有JS报错，比如属性读取失败的提示
• 切换到网络面板，点击搜索按钮查看是否有对应的GitHub API请求发出，确认请求URL、请求状态、返回数据是否正常
• 接口返回正常的情况下，在done回调里打印data变量，确认返回数据结构是否符合预期，再核对渲染时的变量名是否对应

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