Retreive and return response from controller in magento2

Question

I have a problem in which I'm making an AJAX call to a controller. But, I am not able to check whether it is working or not. I also want to return data in response. But, it keeps throwing some errors. Below is my code:

<?php
namespace MyNameSpace\MyModule\Controller\Index;

class Custom {
    protected $request;
    public function __construct(\Magento\Framework\App\Request\Http $request) {
        $this->request = $request;
    }

    public function getPost() {
        return $this->request->getPost();
    }

    public function __execute() {
        echo "success";
    }
}

But I keep receiving some or the other errors, below is my AJAX call and it is working and sending proper data:

$.ajax({
        url : url,
        type : 'post',
        data : data,
        success : function(result) {
            console.log(result);
        },
        error : function(err) {
            console.log("Error : "+JSON.stringify(err));
        }
})

Answer 1

ajax

<script>
require(['jquery', 'jquery/ui'], function($){ 


      $.ajax({
          method: "POST",
          url: "<?php  echo $block->getUrl('modulanefrontname/ajax/search'); ?>",
          data: { q: 'some' },
          dataType: "json"
        })
      .done(function( msg ) {

       /do your thing

      });


 });

you can use ResultFactory controller

<?php
namespace MyNameSpace\MyModule\Controller\Index;
use Magento\Framework\Controller\ResultFactory;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;



class Custom extends Action {
    protected $request;
    public function __construct(Context $context,array $data = []) {
        parent::__construct($context,$data);
    }



    public function __execute() {
       if ($this->getRequest()->getPost('q')):
        $query=$this->getRequest()->getPost('q');
                  $data=array("bdfb");
        $resultJson = $this->resultFactory->create(ResultFactory::TYPE_JSON);
        $resultJson->setData($data);
        return $resultJson;
    endif;
    }
}

Answer 2

Try with below code in controller,

<?php

namespace Vendor\Modulename\Controller\Index;

use Magento\Framework\Controller\ResultFactory;    

class Custom extends \Magento\Framework\App\Action\Action
{
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\Json\Helper\Data $jsonHelper,
        \Magento\Framework\View\Result\PageFactory $resultFactory
    ) {
        $this->jsonHelper = $jsonHelper;
        $this->resultFactory = $resultFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        /** @var \Magento\Framework\View\Result\Page $resultPage */
        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);

        /** @var \Magento\Framework\Controller\Result\Raw $response */
        $response = $this->resultFactory->create(ResultFactory::TYPE_RAW);
        $response->setHeader('Content-type', 'text/plain');
        $data1 = 'This is test';
        $data2 = 20;
        $response->setContents(
            $this->jsonHelper->jsonEncode(
                [
                    'data1' => $data1,
                    'data2' => $data2,
                ]
            )
        );
        return $response;
    } 
}

Inside jquery,

jQuery.ajax({
      url: "/modulename/index/custom",
      type: 'POST',
      dataType: 'json',
      data: {},
      complete: function(response) {             
          stores = response.responseJSON.data1;
          selectedStore = response.responseJSON.data2;          
          console.log(data1+' '+data2);   
          },
          error: function (xhr, status, errorThrown) {
              console.log('Error happens. Try again.');
          }
    }); // ajax function end here

Answer 3

In Magento 2.4.5-p1 we can use jQuery Ajax like below.

Write below code in js file:

define(
    [
        'jquery',
        'mage/url'
    ],
    function (
        $,
        url
    )  {
        'use strict';
        
                var orderId = 2333;
            
                getCheckoutId: function() {

                        var endpointUrl = url.build('test/ajax/response');

                        return $.post(endpointUrl, {
                            "orderId": orderId
                    }).done(function(response) {
                        console.log(response);
                    })
                }
        }
);

Write the below code in the controller file:

<?php
namespace Ajax\Demo\Controller\Ajax;

use Magento\Framework\App\Action\HttpPostActionInterface;
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\Action\Action;

class Response extends Action implements HttpPostActionInterface
{
    /**
     * @var Magento\Framework\Controller\Result\JsonFactory
     */
    protected $resultJsonFactory;

    /**
     * @var \Psr\Log\LoggerInterface
     */
    protected $logger;

    /**
     * Index constructor.
     *
     * @param Magento\Framework\App\Action\Context $context
     * @param Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
     * @param \Psr\Log\LoggerInterface $logger
     */
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
        \Psr\Log\LoggerInterface $logger
    ) {
        $this->resultJsonFactory = $resultJsonFactory;
        $this->logger = $logger;
        parent::__construct($context);
    }

    /**
     *
     * @return \Magento\Framework\Controller\ResultInterface
     *
     */
    public function execute()
    {
        $resultJson = $this->resultJsonFactory->create();

        try {
            $orderId = $this->getRequest()->getParam('orderId', '');
            $checkoutId = 123456;

            $resultJson->setData([
                'checkoutId' => $checkoutId,
                'success' => true
            ]);
            
        } catch (\Exception $e) {
            $this->logger->error($e->getMessage());
        }

        return $resultJson; 
    }
}