百度云盘　　传送门 　　密码：l94p

实现效果：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>获取当前IP地址和省市地区位置代码</title>

</head>

<script src="js/jquery.min.js"></script>

<style type="text/css">

    .box{text-align: center;}

</style>

<body>

<div class="box">

    <h1>AJAX检测ip和地区</h1>

    <p id="city"></p>

    <p id="ip"></p>

</div>

<script type="text/javascript">

$(function(){

    //获取城市ajax

    $.ajax({

    url: 'http://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',

    type: 'POST',

    dataType: 'jsonp',

    success:function(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://freegeoip.net/json/',

        success: function(data){

           console.log(JSON.stringify(data.ip));

           $('#ip').html(JSON.stringify(data.ip))

        },

        type: 'GET',

        dataType: 'JSON'

    });

})

</script>

</body>

</html>

index.html

<script type="text/javascript">

$(function(){

    //获取城市ajax

    $.ajax({

    url: 'http://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',

    type: 'POST',

    dataType: 'jsonp',

    success:function(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://freegeoip.net/json/',

        success: function(data){

           console.log(JSON.stringify(data.ip));

           $('#ip').html(JSON.stringify(data.ip))

        },

        type: 'GET',

        dataType: 'JSON'

    });

})

</script>

JS框架_(AJAX)检测ip和地区的更多相关文章

  1. 检测ip和地区

    获取当前位置所在省份城市和所用网络IP <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件

    vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...

  3. JS框架_(JQuery.js)模拟刮奖

    百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  5. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  7. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  8. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  9. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

随机推荐

  1. 从入门到自闭之Python名称空间

    名称空间: 内置空间:python解释器自带的一块空间 全局空间:py文件中顶格写的就是全局空间 局部空间:函数体中就是局部空间 加载顺序: 内置空间 全局空间 局部空间 # def func(): ...

  2. python_0基础开始_day08

    第八节 1,文件操作 文件操作目的: 持久化,永久存储 (数据库之前 -- 文件操作就是代替数据库) 读 1,找到文件位 2,双击打开 3,进行一些操作 4,关闭文件 open() 打开,通过pyth ...

  3. MySQL 必备工具使用的6个锦囊妙计！

    这款工具是 MySQL 一个重要分支 percona 的,名称叫做 percona-toolkit(一把锋利的瑞士军刀),它呢是一组命令的集合.今儿给大家介绍几个我们在生产环境中最长用到的. 工具包的 ...

  4. springcloud(十一)-Zuul聚合微服务

    前言 我们接着上一节.在许多场景下,外部请求需要查询Zuul后端的多个微服务.比如一个电影售票手机APP,在购票订单页上,既需要查询“电影微服务”获得电影相关信息,又需要查询“用户微服务”获得当前用户 ...

  5. 给Tomcat打开远程debug端口

    >cd apache-tomcat-8.5.24 >cd conf >vim catalina.sh 在文件开始处添加: CATALINA_OPTS="-server -X ...

  6. 全局捕获异常（适用于SpringMvc,SpringBoot项目）

    @ControllerAdvice 是controller的一个辅助类,最常用的就是作为全局异常处理的切面类.约定了几种可行的返回值,可以返回String字符串,也可以返回ModelAndView,也 ...

  7. Delphi Opendialog组件

  8. redis基础学习

    redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类keyvalue存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了java ...

  9. 在centos7上kvm网卡桥接

    系统环境准备 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux release (Core) [root@linux-node1 ~ ...

  10. 韦东山嵌入式Linux学习笔记02--如何给开发板烧录程序

    购买韦东山嵌入式开发板jz2440 v3会标配两根usb线和一根网线,OpenJtag需要单独购买, 我暂时还没买到该工具. 下面介绍usb烧录以及通过网线烧录程序. 1.usb烧录程序: 借助DNW ...