Javascript

jQuery $.ajax()

Summary

"Ajax" refers to the ability of JavaScript to make HTTP requests asynchronously (a.k.a. "in the background") and act on the results directly without having the browser load a new page. Just like DOM manipulation and event handling, jQuery gives us a high-level interface to the browser's Ajax capabilities through the $.ajax function.

Most Ajax interactions use the JSON data format for requests and responses.

Request

Standard Example

$.ajax({
  url: 'http://localhost:8000/animals',
  type: 'POST',
  dataType: 'json',
  data: {"animal":
  {"name": animal,
  "sound": sound}
}})

OMDBI Example

$.ajax({
  url: 'http://www.omdbapi.com/?t=Star+Wars&y=&plot=short&r=json',
  type: "GET",
  dataType: 'json',
  success: (data) => {
    $('body').append(data.Title + " was released in " + data.Year + "<hr><br>");
  }
});

Shake-it-speare

$.ajax({
  url: 'http://shakeitspeare.com/api/poem',
  type: "GET",
  dataType: 'json',
  success: (data) => {
    const data = data;
    //console.log(data);
    $('body').append(data.poem);
    //alert("huzzah! we did it guys!");
  },
  fail: (error) => {
    console.log(error);
  }
});

POST examples

 const animal = $("#animalName").val();
    const sound = $("#animalSound").val();

    // alert(animal);

    $.ajax({
      url: 'http://localhost:8000/animals',
      type: 'POST',
      dataType: 'json',
      data: {"animal":
      {"name": animal,
      "sound": sound}
    }})