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字典推导式将cookie字符串转化为字典
Python中的列表推导式一般是大家所熟悉的,可以极大的简洁代码:而Python中的字典推导式和列表推导式也是大同小异的 cookie: PHPSESSID=et4a33og7nbftv60j3v9m ...
- python_0基础开始_day09
第九节 1,函数初始 s = "qwertyuiop"n = 0for i in s: n += 1print(n)lst = [1,2,3,4,5]n = 0for i ...
- CentOS 7 安装ActiveMQ
今天给大家介绍一下 CentOS 7 下如何安装ActiveMQ,每个步骤均为亲自己操作后记录.下面我们开始吧. 1.首先进入自己的目录下面,创建并进入 activeMQ 文件夹(mkdir acti ...
- Sentinel基本使用--基于QPS流量控制(二), 采用Warm Up预热/冷启动方式控制突增流量
Sentinel基本使用--基于QPS流量控制(二), 采用Warm Up预热/冷启动方式控制突增流量 2019年02月18日 23:52:37 xiongxianze 阅读数 398更多 分类专栏: ...
- Echarts ajax异步
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Sklearn使用良心完整入门教程
The complete .ipynb file can be download through my share in onedrive:https://1drv.ms/u/s!Al86h1dThX ...
- PHP--API
PHP所有能力都是函数,内置1000多个函数,不是每一个函数都默认直接可以使用,有一些需要安装或者启用额外的“插件”扩展. 1,获取字符串长度 <?php $str='hello'; echo ...
- MySQL--高性能MySQL笔记一
链接管理与安全性: 每个客户端连接都在服务器进程中拥有一个线程. MySQL5.5以及更新的版本提供了一个API,支持线程池插件,可以使用池中少量的线程服务大量的链接. 认证基于用户名.密码和原始主机 ...
- 第二篇.1、python基础之数据类型与变量
一.变量 1 什么是变量之声明变量 #变量名=变量值 age=18 gender1='male' gender2='female' 2 为什么要有变量 变量作用:“变”=>变化,“量”=> ...
- 白盒测试之JUnit与SpringTest的完美结合
通过白盒的单元测试可以验证程序基本功能的有效性,从而保证整个系统的质量,功在一时,利在千秋.目前80%以上公司后台还是基于java,尤其是后台大量采用Spring框架,我们这里采用Junit和Spri ...