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> < ...
随机推荐
- Mysql8 root密码忘记了
需要确定自己的mysql版本是否是8 [root@smonitor ~]# mysql --version mysql Ver 8.0.13 for Linux on x86_64 (MySQL Co ...
- MySQL中文正常而mybatis查询出现乱码的解决方案
解决方案是在spring-mvc.xml文件中,加入 <mvc:annotation-driven> <mvc:message-converters> <bean cla ...
- Codeforces Round #603 F Economic Difficulties
题目大意 给你两棵树,结点分别是1-A与1-B,然后给了N台设备,并且A树和B树的叶子结点(两棵树的叶子节点数量相同)都是链接电机的.问,最多可以删掉几条边使得每个设备都能连到任意一棵(或两棵)树的根 ...
- iview之tabs嵌套
iview之tabs嵌套 说明: iview组件中当嵌套使用 Tabs时,需要在Tabs中指定 name 属性来区分层级,然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字 ...
- PID应用详解
PID应用详解 阅读目录 1.PID介绍及原理2.常用四轴的两种PID算法讲解(单环PID.串级PID)3.常用PID算法的C语言实现5.常用的四轴飞行器PID算法 PID介绍及原理 PID介绍 在工 ...
- 全自动链接克隆KVM虚拟机
virt-clone这个命令是基于全克隆的,也就是拷贝虚拟磁盘文件和虚拟配置文件来实现的完整克隆,速度慢,占用空间多 kvm软件包中并没有实现全自动链接克隆的命令或工具,只能手动实现,于是我决定写一个 ...
- golang time json mongodb 时间处理
golang 中解决前端time 输出,后端mongodb中时间存储. package mask import ( "fmt" "time" "go. ...
- deep_learning_tensorflow_get_variable()
maxwell_tesla tf.get_variable函数的使用 tf.get_variable(name, shape, initializer): name就是变量的名称,shape是变量的 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|（17）|装箱crates]
[易学易懂系列|rustlang语言|零基础|快速入门|(17)|装箱crates] 实用知识 装箱crates 我们今天来讲讲装箱技术crates. 什么是crates? 英语翻译是: 英 [kre ...
- 关于ORACLE的串行化隔离级别--来自ORACLE概念手册
为了描述同时执行的多个事务如何实现数据一致性,数据库研究人员定义了被 称为串行化处理(serializability)的事务隔离模型(transaction isolation model).当所有 ...