jQuery-链接api实现星座运势和手机号归属地查询

墨蓝 2022-09-22 14:54 231阅读 0赞

连接api  做一个星座运势查询。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>星座运势查询-api</title>
        <script src="jquery.js"></script>
    </head>
    <body>
    星座名称：
    
    <select id="xz">
        <option>请选择</option>
        <option  value="白羊座">白羊座</option>
        <option value="金牛座">金牛座</option>
        <option value="双子座">双子座</option>
        <option value="巨蟹座">巨蟹座</option>
        <option value="狮子座">狮子座</option>
        <option value="处女座">处女座</option>
        <option  value="天秤座">天秤座</option>
        <option value="天蝎座">天蝎座</option>
        <option value="射手座">射手座</option>
        <option value="摩羯座">摩羯座</option>
        <option value="水瓶座">水瓶座</option>
        <option value="双鱼座">双鱼座</option>
    </select>
    运势类型：
    
    <select id="rq">
        <option>请选择</option>
        <option value="today">今日</option>
        <option value="tomorrow">明日</option>
        <option value="week">本周</option>
        <option value="nextweek">下周</option>
        <option value="month">本月</option>
        <option value="year">今年</option>
    </select>
    <button id="btn">查询</button>
    <script>
        $(function(){
            $("#btn").click(function(){
                $.ajax({
                    type:"GET",
                    dataType:"json",
                    async:true,
                    url:"apis.baidu.com/bbtapi/constellation/constellation_query",
                    headers:{
                        apikey:"05106943bb40fb418839d9e753e39ffa"
                    },
                    data:{
                        type:$("#rq").val(),
                        consName:$("#xz").val()
                    },
                    success:function(data){
                        $("p").remove();
                        //今日或者明日
                        if($("#rq").val()=="today" || $("#rq").val()=="tomorrow"){
                            if($("#rq").val()=="today"){
                                $("<p>").html("今日运势").css("color","red").appendTo($("body"));
                            }else {
                                $("<p>").html("明日运势").css("color","red").appendTo($("body"));
                            }
    
    //                        $("<p>").html("时间："+data.date).appendTo($("body"));
                            $("<p>").html("星座名称："+data.name).appendTo($("body"));
                            $("<p>").html("速配星座："+data.QFriend).appendTo($("body"));
    
                            $("<p>").html("综合指数："+data.all).appendTo($("body"));
                            $("<p>").html("幸运色："+data.color).appendTo($("body"));
                            $("<p>").html("日期："+data.datetime).appendTo($("body"));
                            $("<p>").html("健康指数："+data.health).appendTo($("body"));
                            $("<p>").html("爱情指数："+data.love).appendTo($("body"));
    
                            $("<p>").html("财运指数："+data.money).appendTo($("body"));
                            $("<p>").html("幸运数字："+data.number).appendTo($("body"));
                            $("<p>").html("工作指数："+data.work).appendTo($("body"));
                            $("<p>").html("总结："+data.summary).appendTo($("body"));
    
                        }
                        //本周或下周
                        if($("#rq").val()=="week" || $("#rq").val()=="nextweek"){
                            if($("#rq").val()=="week"){
                                $("<p>").html("本周运势").css("color","red").appendTo($("body"));
                            }else {
                                $("<p>").html("下周运势").css("color","red").appendTo($("body"));
                            }
    
                            $("<p>").html("星座名称："+data.name).appendTo($("body"));
                            $("<p>").html("日期："+data.date).appendTo($("body"));
    
                            $("<p>").html(data.health).appendTo($("body"));
                            $("<p>").html(data.job).appendTo($("body"));
                            $("<p>").html(data.love).appendTo($("body"));
                            $("<p>").html(data.money).appendTo($("body"));
                            $("<p>").html("一年中的第几周："+data.weekth).appendTo($("body"));
    
                            $("<p>").html(data.work).appendTo($("body"));
    
                        }
    
                        //本月
                        if($("#rq").val()=="month"){
    
                            $("<p>").html("本月运势").css("color","red").appendTo($("body"));
                            $("<p>").html("星座名称："+data.name).appendTo($("body"));
                            $("<p>").html("总体介绍："+data.all).appendTo($("body"));
    
                            $("<p>").html("时间："+data.date).appendTo($("body"));
                            $("<p>").html("健康："+data.health).appendTo($("body"));
                            $("<p>").html("恋情："+data.love).appendTo($("body"));
                            $("<p>").html("财运："+data.money).appendTo($("body"));
                            $("<p>").html("一年中的第几月："+data.month).appendTo($("body"));
    
                            $("<p>").html("工作："+data.work).appendTo($("body"));
                        }
    
                        //本年运势
                        if($("#rq").val()=="year"){
                            $("<p>").html("本年运势").css("color","red").appendTo($("body"));
                            $("<p>").html("星座名称："+data.name).appendTo($("body"));
                            $("<p>").html("时间："+data.date).appendTo($("body"));
                            $("<p>").html("总结："+data.mima.info).appendTo($("body"));
                            $("<p>").html("贴士："+data.mima.text).appendTo($("body"));
    
                            $("<p>").html("事业："+data.career[0]).appendTo($("body"));
                            $("<p>").html("感情："+data.love[0]).appendTo($("body"));
                            $("<p>").html("健康："+data.health[0]).appendTo($("body"));
                            $("<p>").html("财务："+data.finance[0]).appendTo($("body"));
                            $("<p>").html("幸运石："+data.luckyStone[0]).appendTo($("body"));
    
                        }
                    },error:function (){
    
                    },
                    //第九步：请求发送前执行的函数
                    send:function(){
    
                    }
                })
            });
        });
    </script>
    </body>
    </html>

连接api，查询手机号归属地查询：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>手机号查询-api</title>
        <script src="jquery.js"></script>
    </head>
    <body>
    输入手机号：<input type="text" id="tel" placeholder="请输入手机号">
    <button id="btn">查询</button>
    <script>
        $(function(){
            $("#btn").click(function(){
                $.ajax({
                    //第一步：发送请求的类型
                    type:"GET",
                    //第二步：返回数据类型
                    dataType:"json",
                    //第三步：使用异步加载
                    async:true,
                   // 第四步：请求地址
                    url:"apis.baidu.com/apistore/mobilenumber/mobilenumber",
                   // 第五步：发送头信息
                    headers:{
                        apikey:"05106943bb40fb418839d9e753e39ffa"
                    },
                    //第六步：传递参数
                    data:{
                        phone:$("#tel").val()
                    },
                    //第七步：请求成功的时候执行回调函数
                    success:function(data){
                       // alert(data.retData.phone);
                        if(data!=""){
                            //第十步：最后一步，清除上一个的记录
                            $("p").remove();
                            $("<p>").html("手机号为："+data.retData.phone).appendTo($("body"));
                            $("<p>").html("前七位为："+data.retData.prefix).appendTo($("body"));
                            $("<p>").html("营业厅："+data.retData.supplier).appendTo($("body"));
                            $("<p>").html("省地为："+data.retData.province).appendTo($("body"));
                            $("<p>").html("城市："+data.retData.city).appendTo($("body"));
                            $("<p>").html("卡类型："+data.retData.suit).appendTo($("body"));
                        }
                       //第八步：请求错误时返回的函数
                    },error:function (){
    
                    },
                    //第九步：请求发送前执行的函数
                    send:function(){
    
                }
                });
            });
        });
    </script>
    </body>
    </html>