зависимые списки select
 

Добрый вечер! Пытаюсь сделать зависимые списки select и видимо где-то ошибка. Так как я только разбираюсь в ajax, не могу понять где она. Помогите, пожалуйста. Мне кажется, что ошибка где-то в запросе, т.к. при выборе категории выходит alert "При выполнении запроса произошла ошибка " Но что именно не так с запросом? Заранее благодарю за помощь!
Сам запрос

$tip = $mysqli->query("SELECT *
            FROM  `tip`
            WHERE  `id_kat` =  '".$_POST['kat_id']."'");       
        $arr = array();
        while($row = mysqli_fetch_assoc($tip)){
           $arr[] = array($row['tid'] => $row['tname']);
        }
        return $arr;
    
 
if (!isset($_POST['query']) || !$_POST['query']) {
    exit("Нет данных определяющих тип запроса");
}
else {
    
    $query = trim($_POST['query']); 
    // Определяем тип запроса
    switch($query) {
    case 'getTip':  
        // Формируем массив с ответом
        
        $result = NULL;
        $i = 0;
        foreach ($arr as $tip_id => $tip) {
            $result[$i]['tip_id'] = $tip_id;
            $result[$i]['tip'] = $tip;
            $i++;
        }
        
    break;
    
    default:
        // Если данные не определены
        $result = NULL;
    break;
    }
}

(function () {    
    "use strict"; 
    jQuery(function () {        
        $( '#kat' ).change(function () {            
            $( '#tip').find( 'option:not(:first)' ) 
                .remove()                   
                .end()      
                .prop( 'disabled',true );             
            var kat_id = $( this ).val();            
            if (kat_id == 0) { return; }            
            $.ajax({
                type: "POST",   
                url: "query.php",   
                dataType: "json",   
                data: "query=getTip&kat_id=" + kat_id,  
                error: function () {    
                    alert( "При выполнении запроса произошла ошибка :(" );  
                },
                success: function ( data ) {                    
                    for ( var i = 0; i < data.length; i++ ) {                        
                        $( '#tip' ).append( '<option value="' + data[i].tip_id + '">' + data[i].tip + '</option>' );
                    }
                    $( '#tip' ).prop( 'disabled', false );  
                }
            });
        });
    }); 
})();

Данные до сервера доходят? Сервер возвращает корректный JSON? Путь до php скрипта корректно в запросе указан?

А как узнать доходят ли данные до сервера?
Путь до PHP скрипта это тот что в параметре "data" указан? Вопросы у меня, наверно, глупые, но я сосем не знакома ни с ajax ни с javascript, только пытаюсь разобраться во всем этом. Поэтому параметр "data" не уверена, что правильно написан. Запрос на PHP проверяла, он работает.

Посмотреть на сервере выполняется ли php скрипт при запросе или нет... Как вариант прописать сохранение какой-нибудь файла при запуске скрипта или еще какие-нибудь косвенные операции, которые помогут понять запускался ли скрипт вообще или нет и какие данные ему приходят.

Это то что указано в url параметре. Там сейчас query.php и это значит, что query.php должен лежать в той же директории, что и страница откуда запускается аякс запрос.

Еще у вас указан dataType: "json", а это значит, что php скрипт должен возвращать данные в формате JSON, если он вернет данные в другом формате, то будет ошибка при попытке распарсить эти данные.

query.php есть, в конце файла данные преобразуются в формат json, так что с этим тоже должно быть все в порядке. Попробую проверить, доходят ли данные до сервера

И сделайте вывод ошибки на стороне клиента так:

error: function (xhr, status, error) {    
  alert( status + ' | ' + error );  
}

И скажите что оно у вас там выводит.

parsererror | SyntaxError: Unexpected end of input
Я так понимаю, что что-то с запросом PHP не так?

Данные в некорректном формате с сервера приходят. У вас там точно корректный JSON возвращается?

не знаю, еще не проверила. не могу понять, как именно формат проверить

Поменяйте свой ajax на такой:

$.ajax({
                type: "POST",   
                url: "query.php",   
                dataType: "text",   
                data: "query=getTip&kat_id=" + kat_id,  
                error: function () {    
                    alert( "При выполнении запроса произошла ошибка :(" );  
                },
                success: function ( data ) {                    
                    alert(data) 
                }
});

И посмотрите что там у вас сервера приходит.