This post is specifically created for my reference.
These are the main methods that I have been using to make ajax calls to the server using jquery.

Populating Dropdown list with json:

$.getJSON('/Dashboard/GetAthletesByTeamID/' + $("#TeamId > option:selected").attr("value"), 
             function (data) { 
             //Clear the Model list
             $('#ddlAthlete').empty();
             $("#ddlAthlete").append("Select");
             //Foreach Model in the list, add a model option from the data returned
             $.each(data, function (index, optionData) {
               $("#ddlAthlete").append("" + optionData.Value + "");
             });
 });

Dump return html into specific div:

$.ajax({ 
    url: "/Dashboard/GetAthletesTreeByAthleteId/" + $("#AthleteId > option:selected").attr("value"),
    type: 'GET', dataType: 'html',
    success: function doSubmitSuccess(result) {
      $('div#athletesTree').html(result);
    }
});

Posting Information and getting json back

$.ajaxSetup({
   cache: false });
   var selectedItem = $(this).val();
   $.post("/Account/GetStates", 
        { id: selectedItem,
          extra: data },
          function (data) {
            if (data.length > 0) {
               //do your stuff
            }
          },
       "json");
   });