jquery – Retrieving JSON data in PHP called using AJAX

I want to get the value from $data->username but it returns NULL because input is not json. What am I doing wrong here?

Here is my current code.

JS:

$(function() {
    $("#login-form").submit(function(e) {
        e.preventDefault();
        $.ajax({
                url: 'http://penguin.linux.test/api/login.php',
                type: 'post',
                dataType: 'application/json',
                data: $("#login-form").serialize(),
                success: function(data) {
                    console.log(data);
                },
                error: function(data) {
                    console.log(data);
                }
        });

    });

PHP:

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents("php://input", true));
}