百度云盘　　传送门 　　密码：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和地区的更多相关文章

  1. 检测ip和地区

    获取当前位置所在省份城市和所用网络IP <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件

    vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...

  3. JS框架_(JQuery.js)模拟刮奖

    百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  5. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  7. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  8. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  9. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

随机推荐

  1. H.Holy Grail ( floyd )（The Preliminary Contest for ICPC Asia Nanjing 2019）

    题意: 给出一个有向图,再给出6条原来不存在的路径,让你在这6条路径上添加一个最小的数,使图不存在负环. 思路: 直接6遍 floyd 输出就行了. #include <bits/stdc++. ...

  2. 从入门到自闭之Python随机模块

    导入:import random 随机小数:random.random():大于0小于1之间的小数 指定数字之间的小数,不包含指定的最大值:random.uniform() 随机整数:random.r ...

  3. HTML5自学

    1.1   标题文本 在HTML5中,文本的结构除了以行和段落出现之外,还可以作为标题存在,通常一篇文档最基本的结构就是由不同级别的标题和正文组成的. 例如1:(中国门户网站) https://www ...

  4. java构造方法的注意事项总结

    构造方法细节总结~~~~~ 1:首先要了解为什么需要构造方法,,,类中有太多的属性,每次给属性赋值时非常麻烦:编码量大,无法重用给属性赋值的代码.. 2:什么是构造方法呢? 构造方法负责初始化类中的实 ...

  5. ado.net SqlHelp类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. RBAC（基于角色的访问控制）用户权限管理数据库设计

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  7. 深入理解hive基础学习

    Hive 是什么?  1.Hive 是基于 Hadoop处理结构化数据的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类 SQL 查询功能. 2.Hive 利用 HDFS 存储数据 ...

  8. Python爬虫之简单爬虫框架实现

    简单爬虫框架实现 目录 框架流程 调度器url管理器 网页下载器 网页解析器 数据处理器 具体演示效果 框架流程 调度器 #导入模块 import Url_Manager import parser_ ...

  9. Spark查询yarn任务日志

    查看日志:yarn logs -applicationId application_xxx 导入到外部文件 yarn logs -applicationId application_xxx >& ...

  10. Linux搭建局域网yum源和后期在yum源中更新rpm包方法

    在内网中搭建自己的yum源,可以方便在内网中使用,下面简单介绍搭建局域网yum源的方法和后期更新yum源rpm包的方法. 一.搭建局域网yum源 1.需要在局域网访问,首先需要一个web服务器,比如a ...