话不多说，直接上代码：大家可以尝试复制代码到本地测试，jQ地址改成自己本地的文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取所在地及IP</title>
</head>
<script src="./js/jquery.min.js"></script>
<style type="text/css">
.container{margin:50px auto;text-align: center;}
</style>
<body>
<div class="container">
<h1>加载页面获取所在地及IP</h1>
<p id="city"></p>
<p id="ip"></p>
</div>
</body>
<script type="text/javascript">
$(function(){
//获取城市ajax
$.ajax({
url: 'https://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',
type: 'POST',
dataType: 'jsonp',
success:function(data) {
console.log(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://ip-api.com/json',
type: 'GET',
dataType: 'JSON',
success: function(data){
console.log(data);
console.log(JSON.stringify(data.query));
$('#ip').html(JSON.stringify(data.query))
}
});
})
</script>
</html>
网友评论