如何修改jQuery getJson Github用户查询代码 实现点击用户名打开新标签页展示信息

你只需要调整搜索成功回调中用户名的渲染逻辑，把纯文本用户名替换为带新标签页打开属性的超链接即可，具体修改点和完整代码如下：

修改点说明 #

• 将原代码中纯文本展示的用户名包裹为<a>标签，href属性绑定对应用户的信息页地址
• 为<a>标签添加target="_blank"属性，实现点击后在新标签页打开的效果

修改后完整代码 #

<body>
    <input id="search" type="text">
    <button>Search</button>
    <div id="results"></div>
    <!-- 注意原代码依赖jQuery，确保提前引入，若项目中已有引入可删除此行 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('button').on('click', function() {
            var user = $('#search').val();
            $.getJSON("https://api.github.com/users/" + user)
                .done(function(user) {
                    var br = "<br>";
                    var p = $("<p id='users'></p>");
                    // 仅修改本行：把用户名包装为可点击的超链接
                    var name = "Username: <a href='" + user.html_url + "' target='_blank'>" + user.login + "</a>" + 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;
                    // 额外优化：location有真实值时展示真实值，无值再显示Null
                    var location = "Location: " + (user.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>
</body>

自定义信息页说明 #

如果你需要点击后打开的是你自己站点的用户信息页，而非GitHub官方页，只需要调整a标签的href属性为你的站点路由即可，比如你本地的详情页路由为/user-info.html，就可以把href改为/user-info.html?username=${user.login}，然后在user-info.html中实现通过url参数获取用户名、拉取对应数据渲染的逻辑即可。

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