ajax 關於IP地址查詢的API

標籤：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