JSON APIs and Ajax

1.

Use jquery to bind a point-and-click event.

The $(document).ready() code in this function will only run once when our page is loaded, making sure that all the DOM on the page before executing JS is ready.

$(document).ready()add an event to the function click . The code is as follows:

$ ("#getMessage"). On ("click", Function () {

});

2.

The application Interface (API) comes in handy when you need to dynamically change the page based on the data returned by the server.

Remember, the api--application interface (application programming Interface) is a tool for communicating with each other on the computer.

Many web site application interfaces (APIs) are transmitted through a data called JSON format, which is shorthand for JavaScript Object notation.

In fact, if you have ever created a JS object, you have already used this data format, JSON is a very concise data format.

It usually behaves in two forms, one for a single object and one for multiple objects

A single object resembles the following:
{name:‘盖伦‘,advantage:‘单挑无敌‘}

Multiple objects are similar to:
[{name:‘盖伦‘,advantage:‘单挑无敌‘},{name:‘诺克‘,advantage:‘上单霸主‘}]

The combination of each object property and property value is the "key-value pair (Key-value pairs)" that we often hear.

Let's take the data from the previous Cat diagram API.

You should add the following code to your click event:

$.getjson ("/json/cats.json", function (JSON) {
$ (". Message"). HTML (json.stringify (JSON));
});

Display results: [{"id": 0, "ImageLink": "/images/funny-cat.jpg", "codenames": ["Juggernaut", "Mrs. Wallace", "Buttercup"]},{"id" : 1, "ImageLink": "/images/grumpy-cat.jpg", "codenames": ["Oscar", "Scrooge", "Tyrion"]},{"id": 2, "ImageLink": "/images /mischievous-cat.jpg "," codenames ": [" The Doctor "," Loki "," Joker "]}]

3.

Already got the data from the JSON API, now show them to our HTML page.

Here, we use .forEach() functions to iterate through the JSON data written to the HTMLL variable.

First we define an HTML variable,
var html = "";。

We then use the .forEach() function to iterate through the JSON data to write to the HTML variable, and finally to display the HTML variables in our page.

The code for the entire process is as follows:

Json.foreach (function (val) {
var keys = Object.keys (val);
HTML + = "<div class = ' cat ' >";
Keys.foreach (function (key) {
HTML + = "<b>" + key + "</B>:" + Val[key] + "<br>";
});
HTML + = "</div><br>";
});

Show Results:

id:0
Imagelink:/images/funny-cat.jpg
Codenames:juggernaut,mrs. Wallace,buttercup

Id:1
Imagelink:/images/grumpy-cat.jpg
Codenames:oscar,scrooge,tyrion

Id:2
Imagelink:/images/mischievous-cat.jpg
Codenames:the Doctor,loki,joker

4.

In the JSON array obtained from the previous lesson, each object contains a imageLink key value pair that is a key (key), with the URL of the cat's picture as the value (value).

When we traverse these objects, we use imageLink properties to display img the image of the element.

The code is as follows:

html += "

5.

If we don't want to show all the images we get from the JSON API, we can do a filter before we iterate.

We filter out the image with the value of "id" key 1.

The code is as follows:

JSON = Json.filter (function (val) {
Return (val.id!== 1);
});

6.

We also have access to navigator our current location via our browser geolocation .

The location information includes longitude longitude and latitude latitude .

You will see a prompt to be allowed to get the current location. Whether you choose to allow or prohibit, as long as the code is correct, this can pass.

If you choose to allow, you will see that the text on the right side of your phone is the latitude and longitude of your current location.

The code is as follows:

if (navigator.geolocation) {
Navigator.geolocation.getCurrentPosition (function (position) {
$ ("#data"). HTML ("Latitude:" + position.coords.latitude + "<br>longitude:" + position.coords.longitude);
});
}

JSON APIs and Ajax