Отправьте значение на страницу с помощью AJAX, затем загрузите результаты в div

Я работаю над одностраничным веб-сайтом и пытаюсь динамически загружать слайдер с изображениями проекта каждый раз, когда проект выбирается из списка. Я не могу получить значение для передачи любым способом, и глобальный POST возвращается всегда пустым. Я даже пытался сделать это с помощью GET, но не получилось.

Вот код для кнопки:

 <div class="carousel-inner">
<div class="active item project-1">
<img class="row" src="includes/uploads/test.png" />
<div class="project-description project-desc-1 row">
<div class="background-container col-md-6">
<h1 class="col-md-9 project-title">Project described here</h1>
<p class="col-md-10"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<a class="btn btn-default btn-lg show-gallery project" href="#test">View Gallery
</a>


</p>

</div>
</div>
</div>

Загружаемый слайдер:

<?php
$project="";
if (isset($_POST['projectName']))
{
$project = $_POST['projectName'];
}
?>
<section id="projects-slider" class="cd-section">
<div class="row projects-slider-background background" id="projects-slider">
<img src="includes/uploads/up-arrow.png" class="hide-project text-center col-xs-offset-6 col-md-offset-6" alt="Back to Projects" />
<div id="myCarousel2" class="carousel slide" style="padding-top:10%">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
<li data-target="#myCarousel2" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item project-1">
<img class="row" src="includes/uploads/<?=$project?>/test1.jpg" />

</div>
<div class="item">
<img class="row" src="includes/uploads/<?=$project?>/test2.jpg" />
</div>
<div class="item">
<img class="row" src="includes/uploads/<?=$project?>/test3.jpg" />
</div>
<div class="item">
<img class="row" src="includes/uploads/<?=$project?>/test4.jpg" />
</div>

</div>
<!-- Carousel nav -->

<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- LINKED NAV -->

</div>

наконец, код JQuery:
$ (документ) .ready (function () {

    $(".show-gallery").click(function() {
$.ajax({
url: 'public/projects-content.php',
type: 'POST',
data: {
projectName: 'test'
},
dataType: 'json',
success: function(data) {
$('#ajax').html(data);


},

error: function(jqXHR, textStatus, errorThrown) {
$('#ajax').html('');
alert('Error Loading');
}
});

$("#ajax").load("public/projects-content.php", function(response, status, xhr) {
if (status == "error_origin") {
var msg = "Sorry but there was an error when loading the page's content: ";
$("#ajax").html(msg + xhr.status + " " + xhr.statusText);
}
});
});