Back to Top

How to use web API call in Magento 2

Updated 13 December 2023

Magento 2 Web API Call: Today we will learn how to use the Magento 2 webapi as Ajax request in Magento 2 for Fetching, saving and for any operation in your module.

Magento 2 webapi : To know about Magento Web Api please refer to our wonderful blog WEB API .
You can use the Magento WebApi on any page. But here I am going to Guide you , how to use in Customer registration page.

If you are new to Magento 2 then first please refer to Magento 2’s basic Directory Structure.

1 : I am assuming that you have a basic idea of Magento 2 Structure and Web API now.
so let start with the create Layout handle.


Create handle  in this location : app/code/<namespace>/<module_name>/view/frontend/layout/customer_account_create.xml and paste the below code :

<?xml version="1.0"?>
<!--
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Ajaxwebapi
 * @author    Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="customer_form_register">
        	<action method="setTemplate">
        		<argument name="template" xsi:type="string">Webkul_Ajaxwebapi::customer/form/ajaxcall.phtml</argument>
        	</action>
          <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="ajaxlist-content" xsi:type="array">
                            <item name="component" xsi:type="string">Webkul_Ajaxwebapi/js/ajaxcall</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Webkul_Ajaxwebapi/ajaxcall</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

In above I have used knockout Component you can do this with widgets as well.

Searching for an experienced
Magento 2 Company ?
Find out More

2: Now add Script in ajaxcall.phtml

<script type="text/x-magento-init">
    {
        "*": {
                "Magento_Ui/js/core/app":  <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
            }
        
    }
</script>

3 : Create webapi.xml in this location app/code/<namespace>/<module_name>/etc/webapi.xml

<?xml version="1.0"?>
<!--
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Ajaxwebapi
 * @author    Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
 -->
<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Webapi:etc/webapi.xsd">
    <route url="/V1/ajax/save/" method="POST">
        <service class="Webkul\Ajaxwebapi\Api\AjaxSaveInterface" method="ajaxSave"/>
        <resources>
            <resource ref="anonymous"/>
        </resources>
    </route>
</routes>

4 : Create service contract in this location app/code/<namespace>/<module_name>/Api/XyzInterface.php

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Ajaxwebapi
 * @author    Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\Ajaxwebapi\Api;

interface AjaxSaveInterface
{
    /**
     * Returns string
     *
     * @api
     * @param string $ajaxval
     * @return string
     */
    public function ajaxSave($ajaxval);

}

5 : create file for dependencies in this location : app/code/<namespace>/<module_name>/etc/di.xml

<?xml version="1.0"?>
<!--
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Ajaxwebapi
 * @author    Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Webkul\Ajaxwebapi\Api\AjaxSaveInterface" type="Webkul\Ajaxwebapi\Model\Ajax\AjaxSaveManagement" />
</config>

6 :  Create a Model and Implement the Interface defined (I hope you are aware of it else check Repositories ).

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Ajaxwebapi
 * @author    Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\Ajaxwebapi\Model\Ajax;

use Webkul\Ajaxwebapi\Api\AjaxSaveInterface;

class AjaxSaveManagement implements AjaxSaveInterface
{
   

   /**
    * Returns string
    *
    * @api
    * @param string $ajaxval
    * @return string
    */
    public function ajaxSave($ajaxval)
    {
        try{
          return "Saved";
        }catch(\Exception $e){

        }

    }

}

Step 7 

Api call : In Magento two we have a javascript module named as mage/storage , this class or module is used for ajax calling, here is the sample code to  use it .

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Ajaxwebapi
 * @author    Webkul
 * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
define([
    'jquery',
    'mage/translate',
    'mage/storage'
    'uiComponent',
    'ko',
   'Magento_Ui/js/modal/alert'
   ], function (
        $,
        $t,
        storage,
        Component,
        ko,
        alert
    ) {
    'use strict';
     return Component.extend({
        initialize: function () {
           //#ajaxcall button id selector
          $('#ajaxcall').on('click',function(){
            if($('#ajaxcallvalue').val()){
                var serviceUrl,payload;

                 /**
                  * Save  values .
                  */
                 serviceUrl        = 'rest/V1/ajax/save';
                 payload           = {
                     ajaxval: $('#ajaxcallvalue').val()
                 };
                 storage.post(
                     serviceUrl,
                     JSON.stringify(payload)
                 ).done(function (response) {
                   alert({
                       content: $t('Action Successfully completed.')
                   });
                 }).fail(function (response) {
                    alert({
                        content: $t('There was error during saving data')
                    });
                });
              }
          });
        }
      })
    });

The above is the complete sample.  by which you can use the Magento knockout storage module for any operation of Ajax.

Note: Run the above JS code on any event. I have used a button and a text box for a sample.
Please read the links as well that I have added in between the blog If not checked yet.

That was much about the Magento 2 Web API Call.

You can also check our complete Magento 2 extensions.

Hope this will help and if you have any queries then feel free to ask below in the comment section.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

  • liz
    • Nishad Bhan (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home