AJAX CRUD

Demo of CRUD operations from AJAX (Asynchronous JavaScript and XML) with the help of jQuery

Get started

1. Run the backend

2. Open index.html and click on particular operations

3. Refer console for details of both working and code

4. NOTE:

   • for update and delete operations you require ID

     

   • You can get it from console

   • Paste that id in var ID of app.js

Screenshots

CRUD Operations

• Create
• Read
• Update
• Delete

CREATE

function create_() {
  $.ajax({
    type: "POST",
    url: URL,
    contentType: "application/json",
    data: JSON.stringify(DATA1),
    success: function () {
      var msg = "create successful";
      console.log(msg);
      htmlOutput(msg);
    },
  });
}

READ

GET EACH ELEMENT (UNORDERED)

function read_all() {
  $.ajax({
    type: "GET",
    url: URL,
    success: function (data) {
      console.log("success!");
      console.log(data);
      htmlOutput(data);
    },
  });
}

GET EACH ELEMENT BY JSON

function read_one() {
  $.ajax({
    type: "GET",
    url: URL,
    success: function (data) {
      $.each(data, function (index, element) {
        console.log("success!");
        htmlOutput(element.name);
      });
    },
  });
}

UPDATE

function update_() {
  $.ajax({
    type: "PUT",
    url: URL + ID,
    contentType: "application/json",
    data: JSON.stringify(DATA2),
    success: function () {
      var msg = "update successful";
      console.log(msg);
      htmlOutput(msg);
    },
  });
}

DELETE

function delete_() {
  $.ajax({
    type: "DELETE",
    url: URL + ID,
    success: function () {
      var msg = "delete successful";
      console.log(msg);
      htmlOutput(msg);
    },
  });
}

Fetch

Also refer Fetch-CRUD

References

• MDN

• W3Schools

• jQuery

• StackOverflow

• JSON

• JSONPlaceholder