How to render phtml code using ajax in magento 2?

create phtml file at

app/code/Magemonkeys/Custom/view/frontend/templates/index.phtml

<div id="ajax-response-id"></div>
<?php
$ajaxurl = $block->getAjaxUrl();
?>
<script type="text/x-magento-init">
        {
            "*": {
                "Magemonkeys_Custom/js/custom": {
                    "AjaxUrl": "<?php echo $ajaxurl; ?>",
                    "CurrentProduct": "<?php echo $currentProductId; ?>",
                }
            }
        }
</script>

<?php

$ajaxurl = $block->getAjaxUrl();

{

"*": {

"Magemonkeys_Custom/js/custom": {

"AjaxUrl": "<?php echo $ajaxurl; ?>",

"CurrentProduct": "<?php echo $currentProductId; ?>",

}

</script>

create js file at

app/code/Magemonkeys/Custom/view/frontend/web/js/custom.js

define([
"jquery",
"jquery/ui"
], function($){
"use strict";

function main(config, element) {
var $elementvar = $(element);
var AjaxUrlcall = config.AjaxUrl;
var CurrentProduct = config.CurrentProduct;

$(document).ready(function(){
setTimeout(function(){
$.ajax({
context: '#ajax-response-id',
url: AjaxUrlcall,
type: "POST",
data: {currentproduct:CurrentProduct},
}).done(function (data) {
$('#ajax-response-id').html(data.output);
return true;
});
},1000);
});
};
return main;
});

define([

"jquery",

"jquery/ui"

], function($){

"use strict";

function main(config, element) {

var $elementvar = $(element);

var AjaxUrlcall = config.AjaxUrl;

var CurrentProduct = config.CurrentProduct;

$(document).ready(function(){

setTimeout(function(){

$.ajax({

context: '#ajax-response-id',

url: AjaxUrlcall,

type: "POST",

data: {currentproduct:CurrentProduct},

}).done(function (data) {

$('#ajax-response-id').html(data.output);

return true;

});

},1000);

});

};

return main;

});

Create a controller file at

app/code/Magemonkeys/Custom/Controller/Index/View.php

<?php
namespace Magemonkeys\Custom\Controller\Index; 
 
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Framework\View\Result\PageFactory; 
 
class View extends Action
{ 
    protected $_resultPageFactory;
    protected $_resultJsonFactory;
 
    public function __construct(Context $context, PageFactory $resultPageFactory, JsonFactory $resultJsonFactory)
    { 
        $this->_resultPageFactory = $resultPageFactory;
        $this->_resultJsonFactory = $resultJsonFactory; 
        parent::__construct($context);
    }
 
    public function execute()
    {
        $result = $this->_resultJsonFactory->create();
        $resultPage = $this->_resultPageFactory->create();
        $currentProductId = $this->getRequest()->getParam('currentproduct');
         
        $data = array('currentproductid'=>$currentProductId);
 
        $block = $resultPage->getLayout()
                ->createBlock('Magemonkeys\Custom\Block\Index\View')
                ->setTemplate('Magemonkeys_Custom::view.phtml')
                ->setData('data',$data)
                ->toHtml();
 
        $result->setData(['output' => $block]);
        return $result;
    }
}

<?php

namespace Magemonkeys\Custom\Controller\Index;

use Magento\Framework\App\Action\Action;

use Magento\Framework\App\Action\Context;

use Magento\Framework\Controller\Result\JsonFactory;

use Magento\Framework\View\Result\PageFactory;

class View extends Action

{

protected $_resultPageFactory;

protected $_resultJsonFactory;

public function __construct(Context $context, PageFactory $resultPageFactory, JsonFactory $resultJsonFactory)

{

$this->_resultPageFactory = $resultPageFactory;

$this->_resultJsonFactory = $resultJsonFactory;

parent::__construct($context);

}

public function execute()

{

$result = $this->_resultJsonFactory->create();

$resultPage = $this->_resultPageFactory->create();

$currentProductId = $this->getRequest()->getParam('currentproduct');

$data = array('currentproductid'=>$currentProductId);

$block = $resultPage->getLayout()

->createBlock('Magemonkeys\Custom\Block\Index\View')

->setTemplate('Magemonkeys_Custom::view.phtml')

->setData('data',$data)

->toHtml();

$result->setData(['output' => $block]);

return $result;

}

create block file at app/code/Magemonkeys/Custom/Block/Index/View.php

<?php
namespace Magemonkeys\Custom\Block\Index;
 
use Magento\Framework\View\Element\Template;
 
class View extends Template
{
  public function __construct(Template\Context $context, array $data = [])
    {
        parent::__construct($context, $data);
    }
 
  protected function _prepareLayout()
    {
        return parent::_prepareLayout(); 
    }
 
  public function getProducts($productId)
  {
     return;
  }
}

<?php

namespace Magemonkeys\Custom\Block\Index;

use Magento\Framework\View\Element\Template;

class View extends Template

{

public function __construct(Template\Context $context, array $data = [])

{

parent::__construct($context, $data);

}

protected function _prepareLayout()

{

return parent::_prepareLayout();

}

public function getProducts($productId)

{

return;

}

create phtml file at app/code/Magemonkeys/Custom/view/frontend/templates/view.phtml

<?php
$productData = $block->getData();
$productId = $productData['data']['currentproductid'];
$products = $block->getProducts($productId);
?>
<div>
  <div>HTML codes</div>
</div>

<?php

$productData = $block->getData();

$productId = $productData['data']['currentproductid'];

$products = $block->getProducts($productId);

<div>

<div>HTML codes</div>

</div>

that’s it.

Fill the below form if you have any Magento programming need.

Looking For A Magento Commerce Cloud Solution? We’re here to help.
Magento Commerce Cloud is Magento's brilliant move to free you...
Magento 1 Merchants: June 2020 is Not the End. We got you covered.
With Magento 1’s end-of-life, so many merchants are scrambling for...
How to Start an eCommerce Store Using the Magento Platform?
As per the recent statistics, 1.8 billion people across the...
8 Effective Strategies To Boost Your Magento E-commerce Store In 2020
We have mentioned some of the best strategies to boost...
How can you Protect your Magento Stores Running on an unsupported PHP version?
As per the recent study, the majority of Magento stores...

Author Info

Magento 2 Developer

Hire P. Garchar

Let’s have a call

Fill the form & Get Installation Support