这里我展示是自学视频中通过GitHub的api做成的很小的项目，可以搜索用户名，然后通过GitHub来调用相关数据，反馈这个用户的相关信息给你。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="search">
<input id="username" type="search">
<button type="submit">搜索用户</button>
</form>
<div id="result"></div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="JS/main.js"></script>
</body>
</html>
var form = $('#search');
var input=$('#username');
var result=$('#result');
var username;//以上定义变量
form.on('submit',function (e) { //给form添加点击事件，当点击提交表单时
e.preventDefault(); //打断表单提交，执行以下命令
username = input.val();//将我们再input中输入的内容给上边我们定义的变量username
$.ajax('https://api.github.com/users/'+username)//使用ajax，输入url，最后的用户名是更加用户的输入来觉定的
.done(function (data) {//done()方法是输入提交完成之后我们执行的内容
var html =//我们定义一个变量叫html，为什么在以下代码中我的用户名不是data.username，因为github返回给我的内容用户名对应的对象就是login
'<div>用户名：'+data.login+'</div>'+
'<div>邮箱：'+(data.email || '无')+'</div>'+
'<div>ID：'+data.id+'</div>'+
'<div>ID：'+data.bio+'</div>'
result.html(html);//最后我们使用html()方法，将我们上边的html变量的内容放入result中
});
})
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
