使用Ajax自动获取QQ头像昵称

整个过程

QQ失去焦点 -> 取 #QQd的值 ->(url=“https://api.usuuu.com/qq/”+QQ,) 请求返回josn
->

$("#nickname").val(result["data"].name);
$("[name='avatar']").val(result["data"].avatar);

源码：

--------------------html------------------------------
 <input type="hidden" name="avatar" value="-1>
 <input id="QQ" type="text" name="qq"                placeholder="输入qq号自动获取昵称头像">
  <input id="nickname" type="text" name="nickname"       placeholder="昵称(必填)">

----------------------js---------------------------
//#QQ失去焦点  取 #QQ值  请求返回josn ->  name=avatar  #nickname
        // 失去焦点
    $('#QQ').blur(function() {
        var QQ = $("#QQ").val();
        $.ajax({
            url : "https://api.usuuu.com/qq/"+QQ,
            type: "GET",
            dataType: "json",
            success : function(result) {
                console.log(result["data"].name,result["data"].avatar);
                $("#nickname").val(result["data"].name);
                $("[name='avatar']").val(result["data"].avatar);
            }
        });
    });

知识点:

1.JSON数据
JSON(JavaScript Object Notation, JS 对象简谱)

是一种轻量级的数据交换格式，比xml更轻巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用的带宽）。

json是javascript原生格式，就是说在javascript中处理json数据，需要引用其他API或工具包。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

只需要记住！
Json是一种文本字符串！被存储在responseText属性中，而读取json数据可以使用javascript的eval函数来解析json。

JSON语法

基本规则

数据在名称/值对中：json数据是由键值对构成的，键用引号(单双都行)引起来，也可以不使用引号，值得取值类型如下：

数字(整数或浮点数)

字符串(在双引号中)

逻辑值(true或false)

数组(在方括号中)，比如：{“persons”:[{},{}]}

对象(在花括号中)，比如：{“address”:{“province”：“北京”,…}}

null

数据由逗号分隔：多个键值对由逗号分隔

花括号保存对象：使用{}定义json格式

方括号保存数组：[]

比如定义基本格式：

var person = {"name": "张三", age: 23, 'gender': true};
比如定义嵌套格式：

// {}中套[]var person = {    "hobbies": ["足球", "篮球", "乒乓球"]};
// []中套{}var persons = [    {"name": "张三", "age": 23, "gender": true},    {"name": "李四", "age": 24, "gender": true},    {"name": "王五", "age": 25, "gender": false}];

获取数据主要有三种方式：

• json对象.键名

• json对象[“键名”]

• 数组对象[索引]

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件