QQ号码获取头像、昵称Demo

最后更新时间：2020年03月23日

Akina为了适应国内环境引入了QQ头像，但是评论依旧是需要输大量信息才行，用户体验可以说极差了。
这个Demo 可以实现用户输入QQ号后自动获取 昵称、头像、邮箱信息，

//得到QQ号码
var qqnum = document.getElementById("qq").value;
//获取头像
document.getElementById("QHP").setAttribute("src","https://q.qlogo.cn/g?b=qq&nk="+qqnum+"&s=100");
//获取邮箱
document.getElementById("email").value=qqnum+"@qq.com";

获取昵称：

$.ajax({
    type: 'get',
    url:'http://192.168.1.60/getqqinfo.php?qq='+qqnum,  // getqqinfo.php是后端处理文件
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'portraitCallBack',
    success: function(data) {
        $('#name').val(data[qqnum][6]);    // 将返回的qq昵称填入到昵称input表单上，
    },
    error: function() {
        alert('糟糕，昵称获取失败！请重新填写。'); // 弹出警告
    }
}

另外需要一些php:

<?php
header("content-Type: text/html; charset=utf-8");
$qq = isset($_GET['qq']) ? addslashes(trim($_GET['qq'])) : '';
if(!empty($qq) && is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13){
    $qqnickname = file_get_contents('http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins='.$qq); // API
    if($qqnickname){
        $qqnickname = mb_convert_encoding($qqnickname, "UTF-8", "GBK");
        echo $qqnickname;
    }
}
?>

当我愉快的找到我的好兄弟（小白鼠）测试的时候，现实无情的打了我一巴掌。

具体表现为：

所以就体谅一下加个判断吧，谁让我们是情同父（我）子（他）的兄弟呢！

//判断昵称是否为"空白"
if(name.length>0 && name.trim().length == 0){
    $('#name').val("过路人");
}else{
    //填入昵称
    $('#name').val(name);    
}


然后整理一下，补充下细节：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>QQ输入框</title>
        <style type="text/css">
            .center{
                position: relative;
                width: 350px;
                margin: 100px auto;
            }
            .tx{
                width: 100px;
                width: 100px;
                border-radius: 50%;
            }
            img{
                width: 100%;
                padding: 3px;
                border: 1px solid #d6d6d6;
                border-radius: 50%;
            }
            .input{
                position: absolute;
                right: 0px;
                top: 4px;
            }
            input{
                margin: 8px 0 0 0;
                border: 2px solid #D6D6D6;
                height: 20px;
                padding: 0 0 0 5px;
            }
        </style>
    </head>
    <body>
        <div class="center">
            <div class="tx">
                <img id="QHP" src="img/shemi.jpg" >
            </div>
            <div class="input">
                <input type="text" name="qq" id="qq" value="" placeholder="填写QQ号" onBlur="qqinput()" /><br />
                <input type="text" name="name" id="name" placeholder="昵称" value="" /><br />
                <input type="email" name="email" id="email" placeholder="邮件地址" value="" /><br />
            </div>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function qqinput () {
            //获取QQ号
            var qqnum = document.getElementById("qq").value;
            if(qqnum.search(qqnum)!=-1&&qqnum!=""){
                $.ajax({
                    type: 'get',
                    url:'http://192.168.1.60/getqqinfo.php?qq='+qqnum,  // getqqinfo.php是后端处理文件
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'portraitCallBack',
                    success: function(data) {
                        var name = data[qqnum][6];
                        //判断昵称是否为"空白"
                        if(name.length==0 && name.trim().length == 0){
                            $('#name').val("过路人");
                        }else{
                            //填入昵称
                            $('#name').val(name);    
                        }
                        //填入QQ号对应头像
                        document.getElementById("QHP").setAttribute("src","https://q.qlogo.cn/g?b=qq&nk="+qqnum+"&s=100");
                        //填入邮箱
                        document.getElementById("email").value=qqnum+"@qq.com";
                    },
                    error: function() {
                        //还原头像
                        document.getElementById("QHP").setAttribute("src","img/shemi.jpg");
                        //清空表单
                        $('#qq,#name,#email').val(''); 
                        // 弹出警告
                        alert('糟糕，昵称获取失败！请重新填写。'); 
                    }
                });
            }else{
                alert("请检查QQ号码"); 
            }
        }
    </script>
</html>

注：别忘了搭配上面的php使用。

核心代码来自：http://www.inlojv.com/5435.html

声明：纸盒博客|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - QQ号码获取头像、昵称Demo

Carpe Diem and Do what I like