passing a JavaScript array to PHP file returns empty array

I'm trying to pass a javascript array to PHP file like this:

Code in JS file:

let directories =JSON.stringify(["John", "Sara", "Max"]);   
$.post('../test.php', {directories: directories});

And inside the PHP file:

$directories = json_decode($_POST['directories']);

But each time I get an empty array! How can I fix this?

Update:

PHP

<?php
function getDirContents($directories, &$results = array()){

    $length = count($directories);
    for ($i = 0; $i < $length; $i++) {

    $files = array_diff(scandir($directories[$i]), array('..', '.'));;
    foreach($files as $key => $value){
        $path = $directories[$i].DIRECTORY_SEPARATOR.$value;
        if(is_dir($path)) {
          getDirContents($path, $results);
        } else {
          $directory_path = basename($_SERVER['REQUEST_URI']);
          $results[] =  'https://' . $_SERVER['SERVER_NAME'] . str_replace($directory_path, "", $_SERVER['REQUEST_URI']) .$path;
        }
    }

    }

    return $results;
}

$directories = json_decode($_POST['directories']);
print_r($_POST['directories'] 



echo json_encode(getDirContents($directories));

Javascript

$(document).ready( function() {


    let directories =JSON.stringify(["recognition final tests", "4789"]);   
    $.post('../test.php', {directories: directories});

        $.ajax({
            type: 'POST',
            url: '../test.php',
            data: 'id=testdata',
            dataType: 'json',
            cache: false,
            success: function(result) {
            console.log(result);
            preload(result);

            },
        });
});




function preload(arr){
arr = arr.map(x => encodeURI(x));   
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Preload = factory());
}(this, (function () { 'use strict';

    function preloadOne(url, done) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onprogress = event => {
            if (!event.lengthComputable) return false
            let item = this.getItemByUrl(event.target.responseURL);
            item.completion = parseInt((event.loaded / event.total) * 100);
            item.downloaded = event.loaded;
            item.total = event.total;
            this.updateProgressBar(item);
        };
        xhr.onload = event => {
            let type = event.target.response.type;
            let blob = new Blob([event.target.response], { type: type });
            let url = URL.createObjectURL(blob);
            let responseURL = event.target.responseURL;
            let item = this.getItemByUrl(responseURL);
            item.blobUrl = url;
            item.fileName = responseURL.substring(responseURL.lastIndexOf('/') + 1);
            item.type = type;
            item.size = blob.size;
            done(item);
        };

        xhr.onerror = event => {
        console.log('an error happed herrt')
    };

        xhr.send();
    }

    function updateProgressBar(item) {
        var sumCompletion = 0;
        var maxCompletion = this.status.length * 100;

        for (var itemStatus of this.status) {
            if (itemStatus.completion) {
                sumCompletion += itemStatus.completion;
            }
        }
        var totalCompletion = parseInt((sumCompletion / maxCompletion) * 100);

        if (!isNaN(totalCompletion)) {
            this.onprogress({
                progress: totalCompletion,
                item: item
            });
        }
    }

    function getItemByUrl(rawUrl) {
        for (var item of this.status) {
            if (item.url == rawUrl) return item
        }
    }

    function fetch(list) {  
        return new Promise((resolve, reject) => {
            this.loaded = list.length;
            for (let item of list) {
                this.status.push({ url: item });
                this.preloadOne(item, item => {
                    this.onfetched(item);
                    this.loaded--;
                    if (this.loaded == 0) {
                        this.oncomplete(this.status);
                        resolve(this.status);
                    }
                });
            }
        })
    }

    function Preload() {
        return {
            status: [],
            loaded: false,
            onprogress: () => {},
            oncomplete: () => {},
            onfetched: () => {},
            fetch,
            updateProgressBar,
            preloadOne,
            getItemByUrl
        }
    }

    return Preload;

})));


const preload = Preload();

preload.fetch(arr).then(items => {
  // use either a promise or 'oncomplete'
  console.log(items);
});

preload.oncomplete = items => {
  console.log(items);
}

preload.onprogress = event => {
  console.log(event.progress + '%');
}

preload.onfetched = item => {
  console.log(item);
}

};

UPDATE 2:

JS

$(document).ready( function() {


    let directories =JSON.stringify(["recognition final tests", "4789"]);   
    //$.post('../test.php', {directories: directories});

        $.ajax({
            type: 'POST',
            url: '../test.php',
            data: {directories: directories , id : "testdata"} ,
            dataType: 'json',
            cache: false,
            success: function(result) {
            console.log(result);
            preload(result);

            },
        });
});

PHP

$directories = json_decode($_POST['directories']);
print_r($_POST['directories'] 

Still I get jquery-3.4.1.min.js:2 POST https://reed123.000webhostapp.com/test.php 500