Ajax API for IP address queries

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> Enter the IP address to query the corresponding information </ p>
  <input id = "iptext" type = "text">
  <button type = "submit"> Query </ button>
</ form>

<div> </ div>



<!-Open source CDN is recommended to select external JS to be referenced //->
<script type = "text / javascript" src = "http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"> </ script>


/ * Javascript code snippet * /
$ (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 Technology

• Ajax is not a new programming language, but a technique for creating better, faster, and more interactive Web applications.
• Use JavaScript to make requests to the server and handle the response without blocking the user! Core Object XMLHttpRequest. With this object, your JavaScript can exchange data with the Web server without reloading the page
• AJAX uses asynchronous data transfer (HTTP request) between the browser and the Web server, which allows the Web page to request a small amount of information from the server, rather than the entire page

• The abbreviation for AJAX functionality in jquery

1. $. Ajax({
2. URL: url,
3. Data: data,
4. Success: success,
5. DataType: dataType
6. });

About the IP Address query API

• The URL parameter has been provided to us

http://apis.baidu.com/apistore/iplookupservice/iplookup?ip= your IP '

• You need to add a header parameter to the request data, add Apikey as a parameter to the header

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

Note: When returning {"Errnum": 300003, "errmsg": "URL is not parse"}, verify the incoming apikey;

• The JSON-formatted data we requested returns the case

2. {
4. "Errnum": 0,
6. " errmsg": "Success",
8. "Retdata": {
10. "IP": "117.89.35.58", //ip address
12. " Country": "China", //Country
14. "province": "Jiangsu", //province Foreign default value is None
16. "City": "Nanjing", //The default value for cities abroad is none
18. "District": "Drum Tower",//region foreign default value is None
20. " carrier": "China Telecom" //Carrier special IP display as unknown
22. }
24. }

Processing of data after a request

• The returned data is in the form of an object, and we need to present each piece of data in the page as Key-value, using the $.each () method to traverse

2. $. Ajax({
4. URL:url,
6. Method: "GET",
8. Headers: headers,
10. DataType: "JSON",
12. Success: function(data) {
14. var info=data.   Retdata;
16. $. each(info,function(key,value) {
18. $("div"). Append(key+":"+value+"<br/>");
20. });
22. }
24. })

Ajax API for IP address queries