获取IP，并存储的步骤：
1.通过浏览器的ip获取方法采用第三方的搜狐IP查询，使用方法如下：
- 在根据情况引入js文件，一般在根目录下的index,html中进行引入（public====》index.html）
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
- 获取数据
<script type="text/javascript">
sessionStorage.setItem('ip',returnCitySN["cip"]);
sessionStorage.setItem('cname',returnCitySN['cname'])
</script>
2.在对应的页面中进行数据的拿取，和向后台进行发送进行存储，以便后续使用（先向后台请求，如果数据不存在，在请求另一个第三方的数据（电信/聚合---都是收费）的）
因为有js的存在，一般是放在mounted（）页面中进行操作：
接收数据：let that= this ;
that.checkIp = sessionStorage.getItem('ip'); checkIp是需要现在data中进行声明的
先向后台进行请求，调用后台给出的接口，根据后台返回的值做判断，如果有值则不再请求第三方的数据直接进行数据展示，没有则进行数据请求，在进行数据获取展示
xxx(this.checkIp).then((res)=>{
if(res.data.enName == 'new User'){
ajax({
'url':'https://api.ip138.com/ip/',
'data':{ //默认自动添加callback参数
'ip':this.checkIp, //为空即为当前iP地址
'oid':'48260',
'mid':'108510',
'token':'9681975f8b86df4f9d47cc6d68a230ef' //不安全，请定期刷新token，建议进行文件压缩
},
'dataType':'jsonp',
'success':function(res){
console.log(res);
}
});
}else if(res.data.enName != ''){
xxx(this.checkIp).then((res)=>{
that.form.countryName = res.data.enName;
})
}
})
3.当使用第三方的数据请求成功的时候，你需要让数据传给后台（避免一个id频繁，多次的调用，占用资源，恶意使用）
if(res.ret == 'ok'){
console.log(11111);
// console.log(this);
that.form.countryName = res.data[0];
// console.log(that.form.countryName,"that.form.countryName");
// console.log("this.choseCountry",this.choseCountry);
that.Allparams.ip = that.checkIp;
that.Allparams.enName = that.form.countryName;
xxx(that.Allparams).then((res)=>{
console.log(res);
})
}
完整的代码是：// 获取ip,并向后台查询 （xxx是代表的数据向后台请求的函数名，注意引入接口路径）
let that = this;
that.checkIp = sessionStorage.getItem('ip');
console.log(that.checkIp+" " +that.checkCity);
xxx(this.checkIp).then((res)=>{
if(res.data.enName == 'new User'){
ajax({
'url':'https://api.ip138.com/ip/',
'data':{ //默认自动添加callback参数
'ip':this.checkIp, //为空即为当前iP地址
'oid':'48260',
'mid':'108510',
'token':'9681975f8b86df4f9d47cc6d68a230ef' //不安全，请定期刷新token，建议进行文件压缩
},
'dataType':'jsonp',
'success':function(res){
console.log(res);
if(res.ret == 'ok'){
console.log(11111);
// console.log(this);
that.form.countryName = res.data[0];
// console.log(that.form.countryName,"that.form.countryName");
// console.log("this.choseCountry",this.choseCountry);
that.Allparams.ip = that.checkIp;
that.Allparams.enName = that.form.countryName;
xxx(that.Allparams).then((res)=>{
console.log(res);
})
}
}
});
}else if(res.data.enName != ''){
xxx(this.checkIp).then((res)=>{
that.form.countryName = res.data.enName;
})
}
})
使用第三的数据的时候还需要使用第三的js，js如下：（根据自己情况引入，一般存放在piblic ====>index.html中）
function ajax(params){
params = params||{};
if (!params.url) {
throw new Error('Necessary parameters are missing.'); //必要参数未填
}
var random = +new Date;
var hander = null;
var options = {
url: '', //接口地址
type: 'GET', //请求方式
timeout: 5000, //超时等待时间
cache: true, //缓存
async: true, //是否异步
xhrFields: {}, //设置XHR对象属性键值对。如果需要，可设置withCredentials为true的跨域请求。
dataType: 'json', //请求的数据类型
data: {}, //参数
jsonp: 'callback', //传递请求完成后的函数名
jsonpCallback: 'jsonp_' + random, //请求完成后的函数名
error: function() {}, //请求失败后调用
success: function(){}, //请求成功后调用
complete: function(){} //请求完成后调用
};
var formatParams = function(json) {
var arr = [];
for(var i in json) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(json[i]));
}
return arr.join("&");
};
for(var i in params){
switch(i){
case 'type':
options[i] = params[i].toUpperCase();
break;
case 'dataType':
options[i] = params[i].toLowerCase();
break;
default:
options[i] = params[i];
}
}
if(typeof options.data =='object'){
options.data = formatParams(options.data);
}
if(options.dataType=='jsonp'){
options.cache = params.cache||false;
//插入动态脚本及回调函数
var $head = document.getElementsByTagName('head')[0];
var $script = document.createElement('script');
$head.appendChild($script);
window[options.jsonpCallback] = function (json) {
$head.removeChild($script);
window[options.jsonpCallback] = null;
hander && clearTimeout(hander);
options.success(json);
options.complete();
};
//发送请求
if(options.cache){
options.data += options.data?'&_'+random:'_'+random;
}
options.data += '&'+options.jsonp+'='+options.jsonpCallback;
$script.src = (options.url + '?' + options.data).replace('?&','?');
//超时处理
hander = setTimeout(function(){
$head.removeChild($script);
window[options.jsonpCallback] = null;
options.error();
options.complete();
}, options.timeout);
}else{
if(options.cache){
options.data += options.data?'&_'+random:'_'+random;
}
//创建xhr对象
var xhr = new (self.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP");
if(!xhr){
return false;
}
//发送请求
if (options.type == 'POST') {
xhr.open(options.type, options.url, options.async);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}else{
options.url += options.url.indexOf('?')>-1?'&'+options.data:'?'+options.data;
xhr.open(options.type, options.url, options.async);
options.data = null;
}
if(options.xhrFields){
for(var field in options.xhrFields){
xhr[field]= options.xhrFields[field];
}
}
xhr.send(options.data);
//超时处理
var requestDone = false;
hander = setTimeout(function() {
requestDone = true;
if(xhr.readyState != 4){
xhr.abort();
options.error();
}
options.complete();
}, options.timeout);
//状态处理
xhr.onreadystatechange = function(){
if(xhr.readyState == 4&&!requestDone) {
if(xhr.status>=200 && xhr.status<300||xhr.status == 304) {
var data = options.dataType == "xml" ? xhr.responseXML : xhr.responseText;
if (options.dataType == "json") {
try{
data = JSON.parse(data);
}catch(e){
data = eval（'(' + data + ')');
}
}
options.success(data);
} else {
options.error();
}
hander && clearTimeout(hander);
options.complete();
}
};
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
