使用ajax方法调用aip接口的使以及手机归属地和查询歌曲的aip接口的演示

最新推荐文章于 2023-03-29 12:02:58 发布

少年的舟

最新推荐文章于 2023-03-29 12:02:58 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_46113485/article/details/103951498

本文演示了如何使用Ajax方法调用AIP接口查询手机归属地和搜索歌曲。通过具体的HTML和JavaScript代码示例，介绍了如何设置请求参数、处理响应数据，并展示了运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

运行结果：
在这里插入图片描述