1.使用ajax方法调用aip接口的使用：
这里主要演示手机归属地和查询歌曲的aip接口：
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="妹子">
<input type="button" value="手机归属地">
<div>
<input type="text" placeholder="请输入电话号码">
<input type="text" class="single" placeholder="请输入歌曲名">
</div>
<input type="button" class="two" value="查询歌曲">
<h3></h3>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$('input[type=button]').eq(1).click(function () {
$.ajax({
url:'https://api.asilu.com/phone/',
data:{
phone:document.querySelector('input[type=text]:nth-child(1)').value
},
success:function (data) {
console.log(data);
$('input').first().val(data['city'])
},
dataType:'jsonp'
})
});
$('input[type=button]').eq(2).click(function () {
$.ajax({
url:'http://tingapi.ting.baidu.com/v1/restserver/ting/',
data:{
query:document.querySelector('input[type=text]:nth-child(2)').value,
method:'baidu.ting.search.common'
},
success:function (data) {
console.log(data);
console.log(data['song_list']);
for (var i =0;i<data['song_list'].length;i++){
console.log(data['song_list'][i]["author"]);
$("h3").append(data['song_list'][i]["author"]+'<br>');
}
},
// 认为的指定，返回的数据格式 =》 header('content-type:application/json;charset=utf-8');
dataType:'jsonp'
})
})
})
</script>
运行结果：
