What is a best practice using javascript or jquery to get data back from a restful API that uses CRUD for items with a database.

Question

User-858993849 posted

I have the the following tutorial "Creating Web API in ASp.Net Core 2" working, but am trying to figure out how to use JavaScript or Jquery to work with the Json data.  Here is the tutorial..  https://www.codeproject.com/Articles/1264219/Creating-Web-API-in-ASP-NET-Core-2-0

The tutorial is great in creating the API, but I am needing a little spoon feeding with regard to how a front end can get the data back using Javascript or jquery.

Answer 1

User61956409 posted

Hi JAYHAWKER,

If you'd like to consume Web API from front end application using JavaScript or jQuery, you can refer to the following articles that explained with example how to perform CRUD operation using Web API AND jQuery AJAX.

https://www.c-sharpcorner.com/article/getting-started-with-asp-net-core-and-jquery-crud-using-web-api/

https://www.aspsnippets.com/Articles/Web-API-MVC-CRUD-Select-Insert-Edit-Update-and-Delete-using-Web-API-and-jQuery-AJAX-in-ASPNet-MVC.aspx

To get started with jQuery AJAX, please check the documentation of jQuery.ajax().

https://api.jquery.com/jquery.ajax/ 

$.ajax({
    type: "POST", //GET,PUT,DELETE etc
    url: "{request_url_here}",
    data: '{data_here}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        //code logic here
    },
    failure: function (response) {
        //code logic here
    }
});

With Regards,

Fei Han

Answer 2

User-474980206 posted

if you are already using jQuery, then use its ajax. If you are not using jQuery, then you want to use the native fetch (use pollyfill for older browsers) or the dedicated ajax library axios.

https://github.com/axios/axios

I typically use fetch. jQuery, axios and fetch all use promises, so you can use async/await

  const response = await fetch(`https://api.github.com/users/${name}`);
  const data = await response.json()