Application interface: An easy way to Ajax

The API for the semantic UI, the application interface, provides a simple way to use Ajax to send a request to a server. You can define the actions that correspond to the address of the server, then you bind these actions to the elements on the page, such as a button, a text box, or a form, and when a specific event occurs, the API sends a request to the server based on the address specified in the action, and the server receives the request and responds To return the requested data for our front-end application so that you can use the data that is requested back, such as displaying them on the page.

Let's learn how to use the APIs in this semantic UI. Get ready first.

Service side

We can use a variety of services, such as WordPress, Drupal, Laravel, which can serve as a service to front-end applications to provide data, can handle a variety of front-end application requests. In addition, some dedicated service-side services, such as Firebase, the company was bought by Google.

A specific address is defined on the service side, by requesting these addresses in a different way, the server can process the request and respond to the address as a different response to the requested method, such as possibly returning some article content to the front-end application, or storing the data provided by the front-end application in the database, and so on.

WordPress can use the WP API this plugin to the front-end applications to provide some can handle the request of the endpoint, that is, address. This plugin in later version of WordPress integrated in the core, that is, you may not need to install the plugin alone, WordPress directly contains the functionality provided by this plugin.

On Drupal 7, you can install the Services module. This functionality is provided by the Drupal 8 core. Using the Laravel framework, you can define the resources type controller to handle the request, and then set the response back to the data format as JSON.

Get ready

Below, you can prepare a local to install a good WordPress website, add point content on above, then install WP API 1.x plug-in, install a basic Auth plug-in, this plug-in provides the Basic authentication function, because some requests need to pass authentication to have permission to do.

WP API 1.x

https://wordpress.org/plugins/json-rest-api/

Basic Auth

Https://github.com/WP-API/Basic-Auth

Allow-control-allow-origin: *

Browsers have the same domain restrictions, that is, where you make the request, to the address you requested in the same domain, that is, need the same protocol, the same host name, the same port. English is Same-origin policy. For a simple test, we can install an extension for the Chrome browser: allow-control-allow-origin: * So that you are not subject to this same domain restrictions.

Address: Http://t.im/qlei

Postman

Postman is also an extension of a Chrome browser that you can use to send a request directly to the server and then preview the requested data directly. You can add parameters to the request, you can configure authentication, and so on.

Address: Http://t.im/qlen

Endpoint

The address that the server provides can be requested is called endpoint, which can be translated into endpoints. For example, WP API provides some endpoints, wp-json/posts is a content related to the end of the article, request this address will return to the content of the list, you can also request the endpoint of the time to add parameters, such as wp-json/posts/117, meaning that I want to get is The ID number is the content of this article in 117.

You can also use different methods to request, the general default is get method, meaning to go to the data, if you want to submit the data to the server, such as to publish a new article content, you need to use the Post method to the request, the address can be wp-json/posts. Alternatively, you can use the Put method to send a request to edit the content, using the Delete method to request the deletion.

Implement

The goal is to learn to use the semantic UI API to make requests to the server and learn to take advantage of the content returned by the server.

Use Postman to test

First Use postman this tool to test, open later request WP API to provide an endpoint address, such as posts, this address is your WordPress site address, plus wp-json/posts, I am here: http://web-stack . Wordpress.ninghao.local/wp-json/posts, the requested method selects get, and the following is the result of the request:

The data returned by the server is formatted with JSON, which is somewhat like an object in JavaScript. You can think of the result as an array, there are some projects, these projects are returned to the results, each project is an object, there are some attributes in this object, you can use these properties of the corresponding values, these things are the content of the site, such as the article ID number, title, body, author, Classification and so on.

Requests using the semantic UI API

First prepare the HTML and look like this:

<! DOCTYPE html>

There is an execution button in the HTML document above, we can give this button to bind an API action, when clicked this button can execute the request.

Define actions

The action of an API is a name that corresponds to the address of a request, and an action can contain required or optional parameters. The names of these actions can use phrases such as Save profile, update post, and so on. These actions can be stored here in $.fn.api.settings.api, and then we can bind the action to an element on the page, such as a button, a form, and so on.

Here's how to define an action called posts:

<script>

$.fn.api.settings.api = {

' posts ': ' Http://web-stack.wordpress.ninghao.local/wp-json/post  S '

};

</script>
Bind action

This defines an action called posts, which is then bound to the Execution button on the page:

$ ('. Ui.button '). API ({

action: ' Posts '

});

We can use JQuery to find the element on the page that will bind the API action, this is. Ui.button, and then using the API method, give the method an object parameter, and in this object, add an action attribute, the value of which is the action of the API to use for this element. Here is the posts this action we defined earlier.


Now when you click to execute this button, you will be asked to specify the address in the posts action. Open the console of the browser and we can see something.




The first piece of content on the console is the requested process:

Looking up URL for action-find the address of an action
Querying URL-Query address
Sending request-Send requests
The second piece of content, display successful API Response, successfully get the response, in response to the back of the things inside, you can find the content of the request server, here is some article content.

Use the server to respond to data coming back

After the request succeeds, the onsuccess callback function is executed, and you can handle the data that the server responds to back in a function, such as displaying them on the page. Here we can simply put the response back to the title of the article content displayed on the console look at:

$ ('. Ui.button '). API ({

action: ' Posts ',

onsuccess:function (response) {

Response.map (funct        Ion (POST) {

console.log (post.title);

});

}

});
In the element's API this method configuration object, add a onsuccess attribute, the value of the property is a function, accept a parameter called response, this response is the server response back to the data, it is an array, so we can use the map method to loop through the array, outputting the title attribute in each result to the console.


The parameters in the action

In defining the API action, we can add some parameters to the action, such as you may want to get a specific article content, not a list of articles. This requires using the ID of the article content as a parameter so that the server returns a specific article content. There are two kinds of parameters, one is required, that is, you have to specify the value of this parameter at the time of the request, the other is an optional parameter, the request can be added to the parameter, you can not add.

Required parameter: {parameter name}
Optional parameter: {/parameter name}
The difference is that the parameter name of an optional parameter is preceded by a slash. Here we add a parameter called ID to posts this action:

$.fn.api.settings.api = {

' posts ': ' Http://web-stack.wordpress.ninghao.local/wp-json/posts/{/id} '

};
Above we define the ID as an optional parameter.

Set the value of a parameter

When making a request to the server, you can specify the value of the parameters in the API action. There are two ways to use the Data property, and the other is to use JavaScript to specify the value of the parameter.

To set the value of a parameter using the Data property

The method of using the Data property is that you can add an attribute at the beginning of the element, followed by the name of the parameter, and the corresponding value, for example, I want to set a value for the ID parameter, and use the Data property to set it to:

<button class= "ui button" data-id= "119" > Execution </button>

Data-id the value of this property on the element is the value set for the ID in the API action, this is 119, so the result returned by the server will be the content of the article with ID number 119. Since the parameter is added, the returned result is not an array, so we need to change the onsuccess.

Onsuccess:function (response) {

if ($.isarray (response)) {

Response.map (function (POST)

{        Console.log (post.title);

});

else {

Console.log (' ID: ' + response.id + ' + response.title);

}

},
To determine the server response back to the data, is not an array, if the loop on the console output the value of the title attribute, if not, directly output the ID of the result and the value of the title attribute.

Use JavaScript to set the value of a parameter

Set the value of a parameter you can also use the JavaScript method to first remove the Data-id attribute on the element. Then go and change the configuration object in the API method:

  $ ('. Ui.button '). API ({      action:  ' posts '),        urldata: {        id: 119    &NBSP;&NBSP;&NBSP;&NBSP},       onsuccess: function (response)  {         if  ($.isarray (response))  {           response.map (function  (POST)  {      

      console.log (Post.title);

          });         } else {       

   console.log (' ID: '  + response.ID +  '   '  + response.title);         }       }, &NBSP;&NBsp;  }); 
Above we added a Urldata attribute to the API's configuration object, which is an object in which you can set the API parameters and the corresponding values.