ajax 关于IP地址查询的API

Posted 2020-10-10 奔跑的葛根

form {
  border: 1px solid #467;
  border-radius: 5px;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  padding:10px;
  width:300px;
  color:#456;
  margin:15px; 
}
div{
  margin:15px;
  color:#346;
}
button{
  display:inline-block;
  padding:6px 12px;
  margin-bottom:0; 
  line-height:1.4;
  text-align:center;
  cursor:pointer;
  border-radius:4px;
  border:1px solid transparent;
  color:#fff;
  background:#1aba9c;
}
input{
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}



<form action="#">
  <p>输入ip地址查询相应的信息</p>
  <input id="iptext" type="text">
  <button type="submit">查询</button>
</form>

<div></div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>


/*Javascript代码片段*/
$(function(){
  
 $("form").submit(function(e){
   e.preventDefault();
   var ip=$("#iptext").val(),
       headers = {"apikey": "5292d6abaf0ec95c2b7924551e50668f"};
       url="http://apis.baidu.com/apistore/iplookupservice/iplookup?ip="+ip;
   $.ajax({
       url:url, 
       method: "GET",  
       headers: headers, 
       dataType: "json",
       success: function(data){
          var info=data.retData;   
          $.each(info,function(key,value){
              $("div").append(key+":"+value+"<br/>");
          
          });
           
         }

   })
   
   
 });
  

});

AJAX技术

• AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
• 使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据
• AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面

• jQuery中ajax功能的缩写

1. $.ajax({
2.   url: url,
3.   data: data,
4.   success: success,
5.   dataType: dataType
6. });

关于IP地址查询的API

 

• URL参数已经提供给了我们

http://apis.baidu.com/apistore/iplookupservice/iplookup?ip=你的ip‘

 

• 需要在请求数据中添加一个header参数,请将apikey作为参数添加到header中

 headers = {"apikey": "5292d6abaf0ec95c2b7924551e50668f"};

备注 :当返回{"errNum":300003,"errMsg":"url is not parse"} 时，请校验是否传入apikey；

 

 

• 我们所请求的json格式数据返回事例

 

 

1. {
2.     "errNum": 0,
3.     "errMsg": "success",
4.     "retData": {
5.         "ip": "117.89.35.58", //IP地址
6.         "country": "中国", //国家 
7.         "province": "江苏", //省份 国外的默认值为none
8.         "city": "南京", //城市  国外的默认值为none
9.         "district": "鼓楼",// 地区 国外的默认值为none
10.         "carrier": "中国电信" //运营商  特殊IP显示为未知
11.     }
12. }

请求后对数据的处理

• 返回的数据是一个对象的形式,我们需要将每一条数据以key-value的形式展示在页面中,使用$.each()方法遍历

1. $.ajax({
2.        url:url, 
3.        method: "GET",  
4.        headers: headers, 
5.        dataType: "json",
6.        success: function(data){
7.           var info=data.retData;   
8.           $.each(info,function(key,value){
9.               $("div").append(key+":"+value+"<br/>"); 
10.            });
11.         }
12.  })