Sometime we need to set html data without load or set it via ajax.

Then create a module name : Magemonkey:Ajaxcall

create index.phtml in Magemonkey/Ajaxcall/view/frontend/templates/

<div id="ajaxresponsedata"></div>
<?php
$ajaxurl = $block->getAjaxUrl();
?>
<script type="text/x-magento-init">
        {
            "*": {
                "Magemonkey_Ajaxcall/js/call": {
                    "AjaxUrl": "<?php echo $ajaxurl; ?>",
                }
            }
        }
</script>

Create js file Magemonkey/Ajaxcall/view/frontend/web/js/

define([
    "jquery",
    "jquery/ui"
], function($){
    "use strict";
 
    function main(config, element) {
        var $element = $(element);
        var AjaxUrl = config.AjaxUrl;
        var CurrentProduct = productid;
         
        $(document).ready(function(){
            setTimeout(function(){
                $.ajax({
                    context: '#ajaxresponsedata',
                    url: AjaxUrl,
                    type: "POST",
                    data: {currentproduct:CurrentProduct},
                }).done(function (data) {
                    $('#ajaxresponse').html(data.output);
                    return true;
                });
            },1000);
        }); 
    };
    return main;
});

Create Index.php file in Magemonkey/Ajaxcall/Controller/Index/

<?php
namespace MagemonkeyCustomControllerIndex;

use MagentoFrameworkAppActionAction;
use MagentoFrameworkAppActionContext;
use MagentoFrameworkControllerResultJsonFactory;
use MagentoFrameworkViewResultPageFactory; 
 
class View extends Action
{
    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('MagemonkeyAjaxcallBlockIndexIndex')
                ->setTemplate('Magemonkey_Ajaxcall::index.phtml')
                ->setData('data',$data)
                ->toHtml();
 
        $result->setData(['output' => $block]);
        return $result;
    }
 
}

That’s it.