Magento 2 extension development requires customization that fulfills the business requirements.
While developing an extension, the developers may need customization that returns the data from the controller in the JSON format.
When we make the AJAX request, the controller is called. In many cases, when we call a specific controller, we need to return data. For such cases, if we return data in JSON format, it would be a convenient option, especially when we need to return multiple values.
For instance, when a customer selects the country, all the states of the selected country are being displayed.
This post gives the programmatic solution to return a JSON response from controller in Magento 2.
Solution to Return a JSON Response from Controller in Magento 2:
1. Create registration.php at app/code/Vendor/Module
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
2. Create module.xml at app/code/Vendor/Module/etc
<? xml version = "1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="1.0.0">
</module>
</config>
3. Create index.php at app/code/Vendor/Module/Controller/Index
<?php
namespace Vendor\Module\Controller\Index;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Action;
class Index extends Action
{
protected $resultPageFactory;
public function __construct(Context $context, PageFactory $resultPageFactory)
{
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
return $resultPage = $this->resultPageFactory->create();
}
}
4. Create ReturnJson.php at app/code/Vendor/Module/Controller/Index
<?php
namespace Vendor\Module\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
class ReturnJson extends Action
{
private $resultJsonFactory;
public function __construct(JsonFactory $resultJsonFactory, Context $context)
{
parent::__construct($context);
$this->resultJsonFactory = $resultJsonFactory;
}
public function execute()
{
$resultJson = $this->resultJsonFactory->create();
return $resultJson->setData(['json_data' => 'come from json']);
}
}
5. Then, create routes.xml at app/code/Vendor/Module/etc/frontend
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="module" frontName="module">
<module name="Vendor_Module"/>
</route>
</router>
</config>
6. Create module_index_index.xml at app/code/Vendor/Module/view/frontend/layout
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block name="module_index_index" template="Vendor_Module::template_file.phtml" cacheable="false"/>
</referenceContainer>
</body>
</page>
7. Create template_file.phtml at app/code/Vendor/Module/view/frontend/templates
<fieldset class="fieldset">
<div class="field required">
<label class="label"
for="json_out"><span><?php echo $block->escapeHtml(__('Output')) ?></span></label>
<div class="input-box control">
<input name="json_out" id="json_out" title="<?php echo $block->escapeHtml(__('Output')) ?>"
value="" class="input-text required-entry" type="text">
</div>
</div>
<div class="field">
<div class="primary">
<button type="submit" class="action submit primary btn_put_json"><span>Put Json Data</span></button>
</div>
</div>
</fieldset>
<script>
require(
[
'jquery'
],
function (
$
) {
$('body').on('click', '.btn_put_json', function () {
var self = $(this);
var url = "<?php echo $block->getUrl() . 'module/index/ReturnJson' ?>";
try {
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
showLoader: true,
success: function (data) {
$("#json_out").val(data.json_data);
}
});
} catch (e) {
}
});
});
</script>̥
Done!
Please do consider sharing this post with Magento Community via social media.
Thank you.
