Create a basic Ajax request for a Knockout.js template

Now that we have confirmed a call to the REST API can succeed, let’s see how to do it in Knockout.js with Ajax. We could use jQuery for this, but it’s better practice to import the mage/storage function and alias it with storage. Ironically, this function uses jQuery under the hood, but we can ignore that fact for now. At least with this approach, the underlying implementation can change, and we can be completely oblivious and unaware of it, allowing us to focus on the API of this storage function.

Triggering API Call on Button Click

Since we want the call to the API to be triggered when clicking the Submit button, we will call storage in our submit handler. Storage has a variety of functions available, but the one we will use now is get(). This function symbolizes a get request and accepts a string of the URL we wish to call. The location of the string will be relative to the base URL with a trailing slash. Note that we are also using backticks here so we can interpolate the SKU variable. The URL will be rest/V1/products/, and last comes the SKU. We will use ${} to interpolate the this.sku() observable.

Handling the Response

When this call executes, we want to do something with the response. The storage function supplies a done() function. done() expects a function callback with the response being the parameter of that callback. We will use the shorthand function syntax for the response and handle the response with a log to the console. So, we will write console.log() and log out this response. Storage will execute a REST call to this endpoint and return the function callback with the response object, and we’re just logging that object.

Setting a Default Value for Testing

Let’s also set the default SKU value equal to 24-MB01. This way, we can easily test things with a valid SKU. When we go back to the page and refresh, click “Confirm SKU”, and we will see a successful response of our object being logged to the console. If we change this SKU to end with “2” and execute the “Confirm SKU” function again, we can see that we are still getting a successful response for the fusion backpack.

Inspecting the Network Tab

Let’s go to the Network tab. We can filter responses by Fetch XHR, which are Ajax responses, and we will see both of these requests being logged. If we click one, we can even inspect the header request URL, request method, response code, and so on. We can also click Preview to preview the JSON response that we are receiving from calling this API.

Readability and Chained Functions

One last thing to mention is that I broke this call to .done() to its own line for readability purposes. This is because the storage object has many chainable functions that you can keep calling on that object. It’s a good practice that when you call multiple chained functions on a single object, break each call down to its own line.