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> < ...
随机推荐
- [NAIPC2016]Jewel Thief(决策单调性+分治)
[NAIPC2016]Jewel Thief(决策单调性+分治) 题面 原题提交地址(题目编号H) 原题面下载地址 有\(n\)个物品,每个物品有一个体积\(w_i\)和价值\(v_i\),现在要求对 ...
- Kinect开发-Hello Kinect
置好开发环境后,首先测试下是否真的完成,也就是能够正常进行开发.此时,当然就得祭出Hello World大法! 1.首先创建一个WPF Application工程,之后添加对Microsoft.Kin ...
- Spring的事务传播机制实例 （转）
1,Propagation.REQUIRED 如果当前没有事务,就新建一个事务,如果已经存在一个事务中,加入到这个事务中.详细解释在代码下方. 实例 员工service @Service public ...
- Python简单主机批量管理工具
一.程序介绍 需求: 简单主机批量管理工具 需求: 1.主机分组 2.主机信息使用配置文件 3.可批量执行命令.发送文件,结果实时返回 4.主机用户名密码.端口可以不同 5.执行远程命令使用param ...
- Fire Net（HDU-1045）（匈牙利最大匹配）（建图方式）
题意 有一个 n*n 的图,. 代表空白区域,X 代表墙,现在要在空白区域放置结点,要求同一行同一列只能放一个,除非有墙阻隔,问最多能放多少个点 思路 只有在墙的阻隔情况下,才会出现一行/列出现多个点 ...
- Scala学习一——基础
一.使用Scala解释器 如果以命令行的方式运行,输出的结果会把类型带上,且结果名默认为res0递增.且Scala解释器读到一个解释器求值打印然后读取下一个(这个过程为读取-求值-打印-循环[REPL ...
- js中setTimeout和setInterval的应用方法（转）
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
- js中的奇闻异事
- GitFlow入门
1-概述 2-GitFLow分支介绍 2.1-master 分支 2.2-develop 分支 2.3-feature 分支 2.4-release 分支 2.5-hotfix 分支 3-GitFlo ...
- LVS、Nginx及HAProxy
本文转载自 linkedkeeper.com 当前大多数的互联网系统都使用了服务器集群技术,集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是 Web 应用服务器集群, ...