码迷,mamicode.com
首页 > Windows程序 > 详细

ajax 关于IP地址查询的API

时间:2017-10-11 10:51:03      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:add   color   响应   格式   jquery   enter   而不是   语言   action   

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.  })
 

 

ajax 关于IP地址查询的API

标签:add   color   响应   格式   jquery   enter   而不是   语言   action   

原文地址:http://www.cnblogs.com/benpaodegegen/p/7648815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!