使用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。