新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 
 （默认为纯文本格式，根据format的参数定义，还可以返回JS、Json格式）。新浪多地域测试方法： 
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=219.242.98.111
 
搜狐IP地址查询接口（默认GBK）：http://pv.sohu.com/cityjson
 
搜狐IP地址查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8
 
欢迎加入技术分享学习公众号【码兄】
 
VUE、React、小程序、公众号开发、web前端等全套前端学习资料领取哦
 
还会教你怎么赚外快哦
 
 
使用方法：利用搜狐查询接口举例说明
 
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">  
    console.log(returnCitySN["cip"]+','+returnCitySN["cname"])  
</script>
 

 这个直接访问网络请求解析那个地址 cip就ok
 
 
欢迎加入技术分享学习公众号【码兄】
 
VUE、React、小程序、公众号开发、web前端等全套前端学习资料领取哦
 

 
特效描述：利用jQuery实现 Ajax 获取当前IP 地区位置代码。利用jQuery实现Ajax获取当前IP和地区位置代码
 
代码结构
 
1. 引入JS
 
2. HTML代码
 

  
AJAX检测ip和地区
 
 
$(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'
 
});
 
})

最近拿vue写项目，大家都懂的，肯定用vue-cli啊，一键生成项目，然后再根据自己的项目需求稍微改一改，开发环境搭建完毕，perfect（破费），但是突然有一天我看到npm run dev后命令行出现的提示
 
Your application is running here : http://0.0.0.0:8080
 
感觉可别扭了，我还得自己去重开一个cmd，ipconfig，找我自己的ip，程序员最怕的就是多写一句代码，多一步操作，为啥？懒呗！哈哈，于是我就想既然，是运行在nodejs里的，那么nodejs应该有可以获取本机ip的模块，果不其然，被我找到了 os 模块，下面直接上代码
 
const os = require('os');
///获取本机ip///
function getIPAdress() {
    var interfaces = os.networkInterfaces();
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
}
const myHost = getIPAdress();
 
然后在webpack.dev.conf.js里面改一下提示
 
compilationSuccessInfo: {
          messages: [`Your application is running here : http://${myHost}:${port}`],
     },
 
然后运行 npm run dev
 你会发现奇迹般地发生了以下结果
 
 
是不是特神奇？哈哈！

开头先说一下，以防有萌新看不懂，所以以下代码注释写的比较多，思路讲的比较清楚，不喜勿喷哈哈哈哈
 
HTML代码：
 
<div id="show_weather">
	<div id="time"></div>
	<div id="updata_time"></div>
	<div id="city_id"></div>
	<div id="weather"></div>
	<div id="air_level"></div>
	<div id="max_wendu"></div>
	<div id="min_wendu"></div>
</div>
<div id="show_change">
	<span id="guangzhou" value="广州">广州</span>
	<span id="shenzhen" value="深圳">深圳</span>
	<span id="beijing" value="北京">北京</span>
	<span id="shanghai" value="上海">上海</span>
</div>
<div>
	<span>当前位置：</span><span id="city"></span><span id="hover_weather">天气</span><span id="change_weather">切换地区</span>
</div>
 
JS代码：
 
1.首先，我们应该先获取当前我们当前的ip地址，利用ip地址找到我们身处的具体位置信息，让网页加载的第一时间获取到我们当前身处的具体位置，从而获取当前地区的天气信息
 
//动态获取当前位置的ip地址
function dynamicIp(){
	$.ajax({
		//该url可以从服务器获取我们需要的ip
		url: 'https://bird.ioliu.cn/ip',
		type: 'get',
		//dataType一定要设置为jsonp，因为浏览器有同源策略的限制
		//同源即：协议、域名、端口都要相同
		//如果不相同，则Ajax无法获取服务器返回的结果
		//如果想要获取不同源的数据，可以将dataType设置为jsonp，就可以解决跨域的问题
		dataType: 'jsonp',
		//从url返回一个成功回调函数success，该函数会携带返回结果，将结果以data传入回调函数
		success:function(data){	
			//通过返回结果data获取我们当前位置的ip地址
			var cityip = data.data.ip;
			//获取到当前位置的ip地址后，将ip地址赋值给cityip
			//调用我们的动态获取天气的函数dynamicGetWeather，将cityip以参数的形式传入
			dynamicGetWeather(cityip);
		}
	})
}
//页面加载时自动执行获取ip地址的函数dynamicIp()
dynamicIp();
 
2.获取到ip地址后，我们应该利用ip地址来获取当前ip地址下的天气信息
 
//动态获取天气的方法
function dynamicGetWeather(cityip){
	//声明一个pattern正则表达式规则，用来检测我们更新地区时传入的参数是ip地址还是汉字地区名称，如"广州"
	var pattern = new RegExp("[\u4E00-\u9FA5]+");
	if(pattern.test(cityip)){
		//当传入的参数cityip为汉字时，我们将url中的参数设置为city=，以此来接收我们传入的城市名称来获取该城市的天气信息
		$.ajax({
		url: 'https://www.tianqiapi.com/api/?version=v1&city='+cityip,
		type: 'get',
		dataType: 'jsonp',
		//url成功返回时，执行回调函数success，获取到服务器返回的数据，以data传入
		success:function(data){
			//以下是html页面数据的实时渲染
			$('#city').text(data.city);
			$('#time').text("当前时间："+data.data[0].date.slice(5));
			$('#updata_time').text("预报更新时间："+data.update_time);
			$('#weather').text("天气："+data.data[0].wea);
			$('#air_level').text("空气质量："+data.data[0].air_level);
			$('#max_wendu').text("最高温度："+data.data[0].tem1);
			$('#min_wendu').text("最低温度："+data.data[0].tem2);
			console.log(data);
		}
	})
	}else{
		//当传入的参数cityip为ip地址(如：113.101.59.68)时，我们将url中的参数设置为ip=，以此来接收我们传入的ip来获取该城市的天气信息
		//这个方法一般只有页面第一次加载，或者页面刷新时才会执行，因为我们切换地区时，传入的都是汉字，执行的是if为true时执行的方法
		$.ajax({
		url: 'https://www.tianqiapi.com/api/?version=v1&ip='+cityip,
		type: 'get',
		dataType: 'jsonp',
		success:function(data){
			//以下是html页面数据的实时渲染
			$('#city').text(data.city);
			$('#time').text("当前时间："+data.data[0].date.slice(5));
			$('#updata_time').text("预报更新时间："+data.update_time);
			$('#weather').text("天气："+data.data[0].wea);
			$('#air_level').text("空气质量："+data.data[0].air_level);
			$('#max_wendu').text("最高温度："+data.data[0].tem1);
			$('#min_wendu').text("最低温度："+data.data[0].tem2);
			console.log(data);
		}
	})
	}
	
}
 
3.获取到当前ip下的天气预报信息后，我们还想通过切换地区来获取别的地区的天气信息
 
//切换地区时，动态更新天气信息
//点击切换地区时，触发click事件
$("#show_change span").click(function(event) {
	//获取我们当前点击的是哪个地区，获取该地区的地区名称(如"广州")
	var cityName = $(this).text();
	//获取到地区名称后，调用dynamicGetWeather()函数，将地区名称cityName以参数形式传入
	//传入后会执行dynamicGetWeather()方法中的if为true时定义的方法，即执行传入参数为汉字时定义的方法
	dynamicGetWeather(cityName);
});
 
以上我们就可以获取我们当前地区的天气预报信息和切换地区后更新天气预报信息，主要涉及到同源策略和跨域的问题，当遇到不同源的url时，我们可以通过jQuery的$.ajax方法的dataType属性设置为jsonp的形式，可以实现不同源跨域获取服务器数据
 
我做这个天气预报时，遇到较多的问题就是天气预报的API接口不能用，获取API接口能用但是获取到的数据我们无法使用，即使格式化了也是无法使用的，找了很久才找到了这两个API接口，亲测目前是能够使用的，过段时间我就不知道了。第一个动态获取当前ip地址的API，url是https://bird.ioliu.cn/ip，请求方式为get，dataType数据类型为jsonp，第二个是获取某城市当前天气预报的API，url是https://www.tianqiapi.com/api/?version=v1&city=，参数有多个，可以是city（城市名称），可以是ip（ip地址），可以是cityid（城市编号），请求方式为get，dataType数据类型为jsonp，具体参考该接口文档