How do I populate content in gridview using ajax call or javascript

<div class="form-group col-md-4">
                @Html.DropDownList("bindReports", new List<SelectListItem>()
        {
            new SelectListItem() { Text= "Consolidated Purchases", Value = "cr" },
            new SelectListItem() { Text= "Programs", Value = "gi" },
            new SelectListItem() { Text= "Logistics", Value = "lg" },
            new SelectListItem() { Text= "General Information", Value = "pr" }
        }, "Select Report")
            </div>

document.ready(function()
{
$('#bindReports').bind('change', function (e) {
            getReportDetails('', '');
        });
}

function getReportDetails() {
    $.ajax({
        url: urlPath,
        success: function (result) {
            
            },
        error: function (xhr, status, error) {
            showAlert("Error...!", error);
        }
    });
}