JavaScript 根据用户名搜索用户？答案

【问题标题】：JavaScript searching for a user based on their username?JavaScript 根据用户名搜索用户？
【发布时间】：2021-11-22 21:30:22
【问题描述】：

我创建了一个函数，它使用 getJSON 来检索在注册 Github 用户的 API 网站上找到的数据集

<!DOCTYPE html>

<!---->
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $(function(){
                var user = $('#search').val();
                $.getJSON("https://api.github.com/users/" + user)
                    .done(function(data) {
                        var br = "<br>";
                        var p = $("<p id='users'></p>");
                             
                            var name = "Username: "+ user.login + br;
                            var pic = "Avatar Picture:" + br + "<img src='"+user.avatar_url+"'/>" +br;
                            var homeURl = "Homepage URL: "+"<a href='"+user.html_url+"'>"+user.html_url+"</a>" +br;
                            var location = "Location: "+"Null" +br;
                            var admin = "Admin: "+user.site_admin;
                            p.append("<p>"+ name  + pic + homeURl + location + admin +"</p>");
                        
                        $("#results").empty().append(p);
                    })
                    .fail(function(jqXHR) {
                        console.log("Error: " + jqXHR.status);
                    })
                    .always(function() {
                        console.log("Random Users Request finished");
                    });
                });
                
        </script>
    </head>

    <body> 
        <input id="search" type = "text">
        <button>Search</button>
        <div id="results"></div>
    </body>
</html>

如您所知，我已经开始对其进行修改，以便仅显示已搜索的用户，而不是显示所有用户

var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)

这段代码的 sn-p 获取在文本区域中输入的用户名，并将其传递给 Url 中的 getJSON 方法。一个示例 URL 是“https://api.github.com/users/mojombo”，因此如果用户输入“mojombo”，那么他们的个人资料就会出现

通过按钮访问此功能

<input id="search" type = "text">
<button>Search</button>

但是，当您搜索示例用户时，实际上任何用户都不会显示任何数据并且仍然是空白屏幕

【问题讨论】：

你为什么改变了你的问题？
你检查过控制台吗？您收到错误消息吗？
@connexo 我没有更改它，我只是添加了您对按钮的编辑
@user16973340 您是否在搜索文本框中传递了有效值？
您要么必须将defer 和/或async 添加到脚本中，要么将其移动到正文的底部。 Here 是一个工作示例。接下来，您必须在success 中将user 替换为data。

标签： javascript jquery getjson

【解决方案1】：

您尚未将功能连接到按钮。

就目前而言，它在用户在搜索字段中输入任何内容之前运行（因此请求"https://api.github.com/users/"，因为当时user 是一个空字符串），并且根本不会对按钮单击做出反应。

不仅仅是

$(function(){
   /* code */ 
});

做

$(function(){ 
    $('button').on('click', function(){
        /* code that runs when button is clicked */
    })
});

【讨论】：

是的，谢谢，但是即使进行了此编辑，它仍然无法搜索
如果您使用的是 Windows，请打开浏览器的开发人员工具（通常为 F12），并在控制台选项卡上检查错误。如果没有，请切换到网络选项卡，当它打开时，执行搜索以查看是否正在发出请求以及得到什么响应。
控制台选项卡上没有错误，我可以看到没有请求
我已经更正了我的答案，它现在应该可以工作了。问题是如果没有$function() { 部分，jQuery 无法找到按钮，因此它不会绑定点击监听函数。