Sending ajax POST data to controller

Question

This is my ajax request:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".emailfocusout").focusout(function(){
            $.ajax({
                url: '/checkout/Email/Email',
                type: 'POST',
                data: {'email': '[email protected]'},
                contentType: 'application/json',
                success: function(data) {
                    console.log('SUCCESS: ', data);
                },
                error: function(data) {
                    console.log('ERROR: ', data);
                },
            });
        });
    });
</script>

This is my controller:

public function EmailAction()
{
    // TODO: Implement me!  Here are some hints ;-)

    $email = $this->getRequest()->getParam('email');
    var_dump($email);
    echo $email;
}

I can't save - data: {'email': '[email protected]'} - to - $email = $this->getRequest()->getParam('email');

What am I doing wrong?

* UPDATE - SOLVED * I took data out of the ajax request. And in URL I put:

url: '/checkout/Email/Email/email/[email protected]',

I worked like that.

Answer 1

Here is how you can properly handle the AJAX POST request while sending the email data securely in the request body:

Corrected AJAX Request

Update your AJAX request to correctly send data in the POST body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".emailfocusout").focusout(function(){
            $.ajax({
                url: '/checkout/Email/Email',
                type: 'POST',
                data: JSON.stringify({'email': '[email protected]'}),
                contentType: 'application/json',
                success: function(data) {
                    console.log('SUCCESS: ', data);
                },
                error: function(data) {
                    console.log('ERROR: ', data);
                },
            });
        });
    });
</script>

Controller to Handle POST Data

Ensure your controller correctly reads the POST data. Here is how you can modify your controller to achieve this:

<?php
namespace Vendor\Module\Controller\Email;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;

class Email extends Action
{
    protected $resultJsonFactory;

    public function __construct(
        Context $context,
        JsonFactory $resultJsonFactory
    ) {
        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        // Retrieve the JSON body and decode it
        $request = $this->getRequest();
        $body = $request->getContent();
        $data = json_decode($body, true);

        // Get the email from the decoded data
        $email = isset($data['email']) ? $data['email'] : null;

        // For debugging
        var_dump($email);

        // Prepare the response
        $result = $this->resultJsonFactory->create();
        if ($email) {
            $result->setData(['success' => true, 'email' => $email]);
        } else {
            $result->setData(['success' => false, 'message' => 'Email not found']);
        }

        return $result;
    }
}

Ensure Proper Routing

Make sure your routing is properly defined. Your routes.xml should be set up correctly as previously discussed.

Summary

By sending the email data in the POST request body as JSON and properly parsing it in the controller, you ensure that your implementation adheres to security best practices and Magento's conventions. This approach keeps sensitive data out of the URL and maintains a clean and secure communication between the client and server.

Answer 2

just use only

data: '[email protected]',

and if you want to send dynamic email value use

data:'email='+$("input[name='email']").val(),

Answer 3

Change this,

    $.ajax({
                        url: '/checkout/Email/Email',
                        type: 'POST',
                        data: {'email': '[email protected]'},
                        contentType: 'application/json',
                        success: function(data) {
                            console.log('SUCCESS: ', data);
                        },
                        error: function(data) {
                            console.log('ERROR: ', data);
                        },
                    });

to

    $.ajax({
                        type: 'POST',
                        url: '/checkout/Email/Email',
                        data: {'email': '[email protected]'},
                        dataType: 'json',
                        success: function(data) {
                            console.log('SUCCESS: ', data);
                        },
                        error: function(data) {
                            console.log('ERROR: ', data);
                        },
                    });

Answer 4

In controller file you can try follow code.

$postData = $this->getRequest()->getPost(); $email = $postData['email'];