百度云盘　　传送门 　　密码：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. Centos8 重启网卡方法

    问题情况: 1.虚机centos8 修改为静态ip后,由于网卡网段变更,无法上网 2.最小化安装,没有ifconfig 3.firewalld,selinux关闭 4.ping 不通物理机 根本原因: ...

  2. 01串LIS（固定串思维）--Kirk and a Binary String (hard version)---Codeforces Round #581 (Div. 2)

    题意:https://codeforc.es/problemset/problem/1204/D2 给你一个01串,如:0111001100111011101000,让你改这个串(使0尽可能多,任意 ...

  3. LeetCode 初次使用 两数之和的训练

    首先看到示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1] 想到,我可以先在nu ...

  4. 为SourceInsight添加多行注释功能菜单

    由于项目看代码主要使用的是Source Insight,习惯了其他编辑器的多行注释功能,对此感到很不习惯,查询网上程序,可以自行添加. 1.打开project,选择base项目中的utils.em,添 ...

  5. PHP7安装redis扩展

    PHP7安装redis扩展优秀开源项目:http://github.crmeb.net/u/liaofeiyum -y install git git clone https://github.com ...

  6. Bss段的作用及初始化

    初始化的全局变量:数据段 局部变量:栈 malloc:堆 未初始化的全局变量:Bss段 arm-linux-readelf -a 应用程序    可查看文件运行架构.大小端.共享库等信息 初始化Bss ...

  7. jQuery获取兄弟标签的文本

    // 一个div里面有一个span标签和多个button标签,每个button标签都有id,span标签没有id,通过点击其中一个button标签,来获取到span标签的text function ( ...

  8. Python名称空间与作用域

    什么是名称空间? 比如下图的长方形代表内存,在这个内存里我要设置一个变量100,那么这个变量得有个门牌号,就叫他a吧,但其实变量不是这么存储的,他其实的存储方式是这样的,他会有一个名称空间,这个名称空 ...

  9. 你在和脚本谈恋爱(自动化在IM聊天中的应用)

    谢谢打开这篇文章的每个你 测开之分层自动化(Python)招生简章 Python自动化测试报告美化 在python中进行数据驱动测试 太嚣张了!他竟用Python绕过了“验证码” 在网络世界里你不知道 ...

  10. 从0开始Jmeter接口测试实战

    在之前的文章中给大家介绍过接口测试文档和接口测试用例示例,本文基于Jmeter工具给大家介绍一下如何实现接口测试用例:包括发起Http请求,绕过登陆,验证响应.JMeter是Apache组织开发的基于 ...