页面加载获取当前位置及IP

2019-04-11  本文已影响0人  KevinLee0424

话不多说,直接上代码:大家可以尝试复制代码到本地测试,jQ地址改成自己本地的文件
<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8" />
         <title>获取所在地及IP</title>
    </head>
    <script src="./js/jquery.min.js"></script>
    <style type="text/css">
         .container{margin:50px auto;text-align: center;}
    </style>
    <body>
         <div class="container">
                <h1>加载页面获取所在地及IP</h1>
                <p id="city"></p>
                <p id="ip"></p>
         </div>
     </body>
     <script type="text/javascript">
           $(function(){
                //获取城市ajax
                $.ajax({
                     url: 'https://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',
                     type: 'POST',
                     dataType: 'jsonp',
                     success:function(data) {
                          console.log(data);
                          console.log(JSON.stringify(data.content.address_detail.province + "," +  data.content.address_detail.city));
                         $('#city').html(JSON.stringify(data.content.address_detail.province + "," + data.content.address_detail.city));
                    }
                });
               //简单只是获取IP ajax
                $.ajax({
                     url: 'http://ip-api.com/json',
                     type: 'GET',
                     dataType: 'JSON',
                     success: function(data){
                           console.log(data);
                           console.log(JSON.stringify(data.query));
                           $('#ip').html(JSON.stringify(data.query))
                      }
                 });
         })
     </script>
</html>

上一篇下一篇

猜你喜欢

热点阅读