百度云盘　　传送门 　　密码：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. php 内存原理

    1.内存结构: 栈区:保存变量名,对CPU,读写速度很快 堆区:保存复杂的数据结构,想对象,数组,复杂的字符串等. 数据段:数据段分为数据段全局区(简单的数据,整型和布尔类型)和数据段静态区(存储静态 ...

  2. split、paste命令

    一.split分割文件 语法       split [OPTION] ... [INPUT [PREFIX]] 描述       将固定大小的INPUT输出到PREFIXaa,PREFIXab,.. ...

  3. 预约系统（四） 管理页面框架搭建easyUI

    Manage控制器用于管理页面 Index视图为管理页面首页,采用easyUi的后台管理框架 Html头部调用,jquery库,easyui库,easyui.css,icon.css,语言包 < ...

  4. java 问题汇总

    1.自动加载出错 require a bean of .... The injection point has the following annotations: - @org.springfram ...

  5. VS Code 配置碰到的问题

    VS Code 呈现缩进参考线以及语法高亮改变 找到 首选项——>设置→搜索renderIntentGuides→将此选项改为true(默认为false),就可以了.

  6. Delphi ListBox组件

  7. autocomplete用法

    今天又使用到 jquery-ui.min.js中的autocomplete这个方法了,记得第一次是在实习的时候已经是一年前了,现在只记得个模样了,所以去找了原来的代码,整理的半天才有理顺,这里分享一下 ...

  8. 个人作业4-ALpha项目测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnbl ...

  9. 读《JavaScript面向对象编程指南》（一）

    第二章 基础 通常认为在JavaScript中主要包括五种基本数据类型:数字.字符串.布尔值.undefined.null.任何不属于上述五种基本类型的值都被认为是一个对象. null和undefin ...

  10. Linux 指令总结

    1. 显示本机信息 显示ip地址 hostname -i 显示当前使用用户 whoani 显示cpu信息 lscpu