Request problem $.ajax - Receive HTML table

Question

I’m not getting to mount the modal getting a table using the $.ajax. Does anyone have any tips?

I’m sending him this way: JS file:

$("html").on('click', "#modalHorariosQuadra", function(){
    var idQuadra = parseInt( $(this).val() );
    var modalTela = $('#modal');    

    $.ajax({
        type: 'POST',
        dataType:'json',
        url: '../Ajax/quadraHorariosParaAlugar.php',
        data: { idQuadra : idQuadra },
        complete: function(retorno){
            modalTela.modal('show');
            modalTela.find('.modal-title').text('Escolha um horário para fazer sua reserva.');
            $('.modal-body').html(retorno);             
        }
    });     
});

The modal even appears, however, without the table:

The PHP file is mounting the table, the file returns me like this:

In the PHP file I just assemble the table, without much mystery.

PHP file:

<?php
// INICIA UMA NOVA SESSÃO DE USUÁRIO
session_start();

// VERIFICA SE ESTÁ LOGADO
if (!isset($_SESSION["id"])){
    // SE O LOGIN NÃO AUTENTICAR                
    $_SESSION['loginError'] = "<div class='alert alert-danger'>Efetue o login!</div>";
    header("Location: ../Index.php");
} else {
    // INCLUI A CAMADA CONTROLLER
    include_once("C:/xamppNew/htdocs/futamador/Model/Model.php");
    $model = new Model();

    $idQuadra = $_POST['idQuadra'] ? $_POST['idQuadra'] : null;

    $arrayHorarios = $model->conexaoProprietario->buscaHorariosQuadra($idQuadra);

    if($arrayHorarios){ ?>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">Hora Inicio</th>
                    <th scope="col">Hora Fim</th>
                    <th scope="col">Data</th>
                    <th scope="col">Ações</th>
                </tr>
            </thead>
            <tbody>

                <?php
                    foreach ($arrayHorarios as $res){
                        $idHorario =  $res['idHorarios'];
                        $idQuadra =  $res['Quadras_idQuadras'];
                        $horaInicio =  $res['horarioInicial'];
                        $horaFim =  $res['horarioFinal'];
                        $dataDisponivel =  $res['dataHorario']; ?>

                        <tr>
                            <td><?php echo $horaInicio; ?></td>
                            <td><?php echo $horaFim; ?></td>
                            <td><?php echo $dataDisponivel; ?></td>
                            <td>
                                <button type="button" id="excluirHorarioProp" class="btn btn-danger btn-sm" value="<?php echo $idHorario; ?>">Excluir</button>
                            </td>
                        </tr>
                    <?php }
                ?>

            <tbody>
        </table>            
    <?php  } else {
        echo "<div class='alert alert-danger'>Não existe horários cadastrados para esta quadra.";
    }
}