How to load Data From Database via Ajax Call with Resource Model on Click?

Question

Here is my Ajax Call. I call it inside click() function with jQuery.

    var customurl = gpImageTagLoadUrl + '?isAjax=true';
               
                    $.ajax({
                        url: customurl,
                        method: 'POST',
                        data: {element_id: 11},
                        dataType: 'json',
                        success: function (data) {
                                console.log(data.element_id);
                        }
                    });

In the other Script i call:

  window.gpImageTagLoadUrl = '<?= /** @noEscape */ $this->getUrl('pluginName/caller/loadproduct')?>';

Inside the php function I call the execute function:

    public function execute()
    {

        $variable = $this->configs->create();
        $item = $variable->addFieldToFilter('id', 11);
        return $item;

    }

I can call this function but i get this error:

InvalidArgumentException): Invalid return type

Any Ideas? What is the right way to create Ajax Load Function in Magento 2?

Answer 1

You need to encode the result to JSON before returning it from the controller.

In your constructor inject object of

Magento\Framework\Controller\Result\JsonFactory

Example:

public function __construct(
    Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory

) {
    $this->resultJsonFactory = $resultJsonFactory;
}

Then create resultJson object

$resultJson = $this->resultJsonFactory->create();

Then create an array with key and response as your variable as follows:

$response = ['result' => $item];

Then return the encoded response from the controller as follows:

return $resultJson->setData($response);

On the jquery end, you will need to decode the JSON response

success: function(response) {   
            item = response.responseJSON.result;
            },
            error: function (xhr, status, errorThrown) {
                console.log('An error occurred on the server');
            }
});