Я пытался понять AJAX в течение последних 12 часов и постепенно теряю терпение. Как я могу просто передать две основные даты через форму или любым другим способом, не обновляя страницу, и выполнить PHP-функцию, которая содержит JS-скрипт?

Перед тем, как я передам значения скрипту, я просто хочу вывести массив данных, который я передаю, чтобы увидеть, работает ли AJAX. Кнопка формы просто обновляет страницу, независимо от всего, так что я не думаю, что AJAX вообще срабатывает. Я пробую на https://localhost для xampp. Я не знаю, что не хватает, чтобы остановить обновление и запустить AJAX-скрипт по нажатию кнопки.

Буду признателен за любые идеи.

functions.php

<?php
add_action('wp_enqueue_scripts','enqueue_parent_styles');
add_action('wp_ajax_nopriv_lineChartCustom', 'lineChartCustomCreate');
add_action('wp_ajax_lineChartCustom', 'lineChartCustomCreate');

function lineChartCustomCreate(){

    if ( isset( $_POST['dataForPHP'])){
        //вывод массива данных
    echo $dataForPHP;
    //<script>Некоторые скрипты для генерации графиков с использованием массива данных</script>
    }
}
?>

page-template.php

<?php
    echo "<form id='my-form'>
        Выберите диапазон дат:
        <input type='date' name='date1'>
        <input type='date' name='date2'>
        <input type='submit' id='submit' value='отправить'>
        </form>";
?>
<script>
        jQuery('#submit').on('click', function() {

            let formData = jQuery('#my-form').serializeArray(); // получает данные формы в виде массива

           jQuery.ajax({
                     url: ajaxurl, // стандартный ajax url WordPress
                     type: 'POST',
                     data: {
                         action: 'lineChartCustom', // используйте это действие для обработки события
                         dataForPHP: formData // это данные вашей формы, которые будут отправлены в PHP под именем dataForPHP                
                 });
             });
         });
</script>

Вы должны добавить wp_die(); в конце вашей PHP-функции.

Но вы также можете отправить ответ с помощью wp_send_json, wp_send_json_error или wp_send_json_success. Эти функции также завершают выполнение функции.

Страница обновляется, потому что вы отправляете форму синхронно (традиционно). Чтобы отправить форму с помощью AJAX, ваша функция, подключенная к onclick, должна вернуть false или вызвать .preventDefault() на событии отправки.

jQuery( "#my-form" ).submit(function( event ) {
    event.preventDefault();
    //
    // ваш код...
});

// --- или --- 

jQuery('#submit').on('click', function() {
    // ....
    return false;
});

Правка:

Переместите ваш javascript-код в отдельный файл (например, myscript.js). Включите этот файл на странице, используя wp_enqueue_scripts() (хук). В коде вы использовали ajaxurl, но нигде не определили его. wp_localize_script() используется для передачи значений из PHP в javascript, таким образом вы установите адрес для AJAX в переменной ajax_url.

page-template.php:

<?php
echo "<form id='my-form'>
    Выберите диапазон дат:
    <input type='date' name='date1'>
    <input type='date' name='date2'>
    <input type='submit' id='submit' value='отправить'>
    </form>";
?>

myscript.js:

jQuery('#submit').on('click', function() {

    let formData = jQuery('#my-form').serializeArray(); // получает данные формы в виде массива

    jQuery.ajax({
        url: ajax_object.ajax_url, // стандартный ajax url WordPress
        type: 'POST',
        data: {
            action: 'lineChartCustom', // используйте это действие для обработки события
            dataForPHP: formData // это данные вашей формы, которые будут отправлены в PHP под именем dataForPHP                
        }
    }).done(function( msg ) {
        alert( msg );
    });
    return false;
});

functions.php

add_action( 'wp_enqueue_scripts', 'my_enqueue' );
function my_enqueue() {

    wp_enqueue_script( 'my-javascript', get_stylesheet_directory_uri(). '/myscript.js',  array('jquery'), '', true );

    // в JavaScript свойства объектов обращаются как ajax_object.ajax_url
    wp_localize_script( 'my-javascript', 'ajax_object',
            array( 'ajax_url' => admin_url('admin-ajax.php') ) );
}

add_action('wp_enqueue_scripts','enqueue_parent_styles');
add_action('wp_ajax_nopriv_lineChartCustom', 'lineChartCustomCreate');
add_action('wp_ajax_lineChartCustom', 'lineChartCustomCreate');

function lineChartCustomCreate(){

    if ( isset( $_POST['dataForPHP']) ){
        //вывод массива данных
        print_r($_POST['dataForPHP']);
    }
    die();
}