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> < ...
随机推荐
- EM 算法(三)-GMM
高斯混合模型 混合模型,顾名思义就是几个概率分布密度混合在一起,而高斯混合模型是最常见的混合模型: GMM,全称 Gaussian Mixture Model,中文名高斯混合模型,也就是由多个高斯分布 ...
- mysql-8.0.17-winx64 部署
1.官网下载mysql-8.0.17-winx64,选择Zip文件格式下载 2.解压到目标路径,我这里是E盘根目录,即E:\mysql8 3.根目录下创建my.ini,内容如下: [mysqld]#端 ...
- ARC 100 C - Linear Approximation题解---三分法
题目链接: https://arc100.contest.atcoder.jp/tasks/arc100_a 分析: 比赛时做这题想到一个瞎搞的方法就是在平均数上下波动一下取最小值,然后大佬yjw学长 ...
- JavaScript斑马线表格制作
//实现斑马线表格 //方法1: document.write('<table border="1">'); for(var i=1; i<11; i++){ i ...
- 使用 java 创建你的第一个区块链（第二部分）
本系列教程的目的是帮助您了解如何开发区块链技术. 在这第二个教程中,我们将: 创建一个简单的钱包: 使用我们的区块链发送已签名的交易: 感觉更酷. 以上这些将使我们拥有自己的加密货币! 从上一个教程开 ...
- springboot启动端口占用问题,报错org.apache.catalina.LifecycleException: Protocol handler start failed
解决办法,找到被占用的端口
- lambda中FirstOrDefault和First
First()表示取集合中的第一个元素,如果集合为空,则抛异常. FirstOrDefault()表示取集合的第一个元素. 如果集合为空,且集合元素是引用类型,则返回null. 如果集合为空,且集合元 ...
- springboot中使用filter
通过注解的方式实现filter过滤器. 创建Filter包,并在该包下创建MyFilter 示例代码: package com.bjpowernode.springboot.filter; impor ...
- 使用go语言开发一个后端gin框架的web项目
用liteide来开发go的后端项目,需要注意的是环境变量要配置正确了 主要是GOROOT, GOPATH, GOBIN, PATH这几个, GOPATH主要用来存放要安的包,主要使用go get 来 ...
- Turing Tree HDU - 3333 (树状数组，离线求区间元素种类数)
After inventing Turing Tree, 3xian always felt boring when solving problems about intervals, because ...