Calling partial view via AJAX

I'm using the following code to call a partial view:

$('#btnGetMilestones').click(function () {$.ajax({
    url: "GetMilestones",
    type: "get",
    success: function (result) {$('#milestonesContainer').html(result);
    },
    error: function (xhr, status, error) {
        var msg = "Response failed with status: " + status + "</br>"+ " Error: " + error;$('#milestonesContainer').html(msg);
    },
    complete: function (xhr, status) {
        var doneMsg = "Operation complete with status: " + status;
        alert(doneMsg);
    }
});
});

for this result method:

public PartialViewResult GetMilestones()
{
    return PartialView("_GetMilestones");
}

The partial view has the milestones for a project (milestones and project are models). When I call the partial view like this:

<div id="milestonesContainer">
    @Html.Partial("_GetMilestone")</div>

it works fine, it gets all the milestones for the project. But when I try to call the partial view via ajax, the error gets called: Response failed with status: error

Error: Bad Request

I'm new in ajax and javascript, so please if possible, explain me like you do to a beginner.