Magento 2: How to send data using Ajax

Question

Im trying to create an Ajax call in frontend but I get redirect to Homepage when I get to the controller. Can anyone explain why? Many thanks. Here my script in phtml

<script type="text/javascript">
require(["jquery"],function($) {
    $(document).ready(function() {
        var customurl = "<?php echo $block->escapeUrl($block->getUrl('webentry/index/search'))?>";
        $("#search-button").on('click', function () {
          $.ajax({
            url: customurl,
            type: 'POST',
            dataType: 'json',
            data: {
              postCode: $('#headquarter_post_code').val()
          },
          success: function(response) {
            console.log("Success!!");
          },
          error: function (xhr, status, errorThrown) {
            console.log(errorThrown);
          }
        });
      });
    });
});

My controller

class Search extends \Magento\Framework\App\Action\Action {
protected $resultFactory;
public function __construct (
    \Magento\Framework\App\Action\Context $context,
    ResultFactory $resultFactory
) {
    $this->resultFactory = $resultFactory;
    parent::__construct($context);
}

public function execute()
{
    $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);

    $response = $this->resultFactory->create(ResultFactory::TYPE_RAW);
    $response->setHeader('Content-type', 'text/plain');
    $country = 'india';
    $state = 'gujarat';
    $response->setContents(
        $this->_jsonHelper->jsonEncode(
            [
                'default_country' => $country,
                'state' => $state,
            ]
        )
    );
    return $response;
}

}

Answer 1

in your ajax request

var param = { 
    replyComment : replyComment.value()
};
$.ajax({
    showLoader: true,
    url: replyControllerURL,
    data: { data: param} ,
    type: "POST",
    dataType: 'json'
}).done(function (data) {
    console.log(data.success)
});

In your controller

use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;    
class Reply extends \Magento\Backend\App\Action
{
    public function __construct(
        Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
    ) {
        $this->resultJsonFactory    = $resultJsonFactory;
        parent::__construct($context);
    }


    public function execute()
    {
        $result = $this->resultJsonFactory->create();
        if ($this->getRequest()->isAjax()) 
        {
            $params = $this->getRequest()->getParam('data'); 
            
                try{
                    $response =[
                        'status' => true,
                        'message' => __('Reply Has Been Send And recorded Successfully'),
                    ];
                }catch(Exception $ex){
                    $response =[
                        'status' => false,
                        'message' => __('Something went wrong'),
                    ];
                }
            return $result->setData($response);
        }
    }