JS框架_(AJAX)检测ip和地区
百度云盘 传送门 密码：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和地区的更多相关文章
- 检测ip和地区
获取当前位置所在省份城市和所用网络IP <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件
vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...
- JS框架_(JQuery.js)模拟刮奖
百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
随机推荐
- Python 入门 之 初识面向对象
Python 入门 之 初识面向对象 1.初识面向对象编程 (核心--对象) (1)观察以下代码: # 面向过程编程 s = "alexdsb" count = 0 for i i ...
- 纯CSS实现tag彩色标签
利用纯CSS实现彩色tag标签,效果如下图 代码如下: .items a:nth-child(9n){background-color: #4A4A4A;} .items a:nth-child(9n ...
- Brain的同步规则
这段话来自Java编程思想并发一章 什么时候使用同步 如果你正在写一个变量,它可能接下来将被另一个线程读取,或者正在读取一个上一次已经被另一个线程写过的变量,那么你必须使用同步,并且,读写线程都必须用 ...
- Echarts ajax异步
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python：map 函数
map(func, *iterables) --> map object map()是 Python 内置的高阶函数,它接收一个函数 func 和一个 list(*iterables),并通过把 ...
- Vue之动态class写法总结
对象方法 最简单的绑定 :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive ...
- MySQL--高性能MySQL笔记一
链接管理与安全性: 每个客户端连接都在服务器进程中拥有一个线程. MySQL5.5以及更新的版本提供了一个API,支持线程池插件,可以使用池中少量的线程服务大量的链接. 认证基于用户名.密码和原始主机 ...
- Gcc 安装过程中部分配置
Gcc 安装过程中部分配置详解 全文参考<have fun with Gcc>一文,如有需要请联系原作者prolj@163.com 解压gcc源码后,需要进行configure,这时候一般 ...
- 多线程之实现Runnable接口及其优点
多线程之实现Runnable接口: 1.创建一个Runnable接口的实现类 2.在实现类中重写Runnable接口的run方法 3.创建一个Runnable接口实现类的对象 4.创建Thread类对 ...
- CentOS7 ab压力测试安装
①.ab(apache benchmark)安装 命令: yum -y install httpd-tools ②.ab测试的命令参数 命令: ab 或 ab -help 显示命令参数如下 ③.ab的 ...