Can AJAX Delete requests be executed without using jQuery?

Question

Can AJAX Delete requests be executed without using jQuery?

Is it possible to use AJAX delete request without using jQuery? My JSON object at localhost:8000 appears like this:

{
    "Students":[{"Name":"Kaushal","Roll_No":30,"Percentage":94.5},
    {"Name":"Rohit","Roll_No":31,"Percentage":93.5},
    {"Name":"Kumar","Roll_No":32,"Percentage":45.5}]}

I am looking for a way to incorporate a delete button that can remove a single record. Any help with the code would be greatly appreciated.

 

function loadDoc(){ 
        
        var table2="<tr><th>Name</th><th>Roll_No</th><th>Percentage</th></tr>"
         var url2="http://localhost:8000/Students"
         var xhttp2=new XMLHttpRequest();
           xhttp2.onreadystatechange = function(){
            if(xhttp2.readyState === 4 && xhttp2.status === 200){
                var jsonArr = JSON.parse(xhttp2.responseText);   
                for(i in jsonArr){
                    table2 += "<tr><td>"+jsonArr[i].Name +
                              "</td><td> "+jsonArr[i].Roll_No+
                            "</td><td>"+jsonArr[i].Percentage+"</td><tr>"     
                        }
                        document.getElementById("mytable").innerHTML = table2;
  

            }
            
        
       
        }
        
        xhttp2.open('GET',url2,true);
        xhttp2.send();

 

 table,th,td{
            border:1px solid black;
            border-collapse: collapse;
        }

 <button onclick="loadDoc()" >Get Data</button>
    <br>
    <br>
    <table id="mytable">
    </table>

javascript html css ajax

Answer 1

Answer №1

Here is a solution that should get the job done:

function httpRequest() {
    this.request = new XMLHttpRequest();
}

httpRequest.prototype.remove = function(url, callback) {
    this.request.open("DELETE", url, true);
    var self = this;
    this.request.onload = function() {
        if (self.request.status === 200) {
            callback(null, "Item Deleted");
        } else {
            callback("Error: " + self.request.status);
        }
    };
    this.request.send();
};

Alternatively, here's another example which might be easier to understand:

deleteItem('https://jsonplaceholder.typicode.com/posts/1');

function deleteItem(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("DELETE", url);
    xhr.send();
    xhr.onload = function() {
        if (xhr.status != 200) {
            console.log('ERROR');
        } else {
            console.log('ITEM DELETED!');
        }
    };
    xhr.onerror = function() {
        console.log('NO CONNECTION');
    };
}

Answer 2

Here is a solution that should get the job done:

function httpRequest() {
    this.request = new XMLHttpRequest();
}

httpRequest.prototype.remove = function(url, callback) {
    this.request.open("DELETE", url, true);
    var self = this;
    this.request.onload = function() {
        if (self.request.status === 200) {
            callback(null, "Item Deleted");
        } else {
            callback("Error: " + self.request.status);
        }
    };
    this.request.send();
};

Alternatively, here's another example which might be easier to understand:

deleteItem('https://jsonplaceholder.typicode.com/posts/1');

function deleteItem(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("DELETE", url);
    xhr.send();
    xhr.onload = function() {
        if (xhr.status != 200) {
            console.log('ERROR');
        } else {
            console.log('ITEM DELETED!');
        }
    };
    xhr.onerror = function() {
        console.log('NO CONNECTION');
    };
}

Answer 3

Answer №2

One way to achieve this is by utilizing the JS Fetch API:

const apiUrl = 'https://www.website.com/endpoint';

const deleteData = async (apiUrl) => {
  const response = await fetch(apiUrl, {
    method: 'DELETE'
  });
  
  const responseData = await response.json();  // parsing the response data as JSON
  return responseData;
}

Answer 4

One way to achieve this is by utilizing the JS Fetch API:

const apiUrl = 'https://www.website.com/endpoint';

const deleteData = async (apiUrl) => {
  const response = await fetch(apiUrl, {
    method: 'DELETE'
  });
  
  const responseData = await response.json();  // parsing the response data as JSON
  return responseData;
}

Can AJAX Delete requests be executed without using jQuery?

Answer №1

Answer №2

Similar questions

reconfigure form credentials with JavaScript

Having trouble with a single GET request not functioning properly on Safari due to an Authorization issue in Angular 6

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

How to Restrict the Use of Conditional "If" Statements in Another Function in Angular 7

What is the best method for pulling in a static, plaintext JSON file into JavaScript through a GET request?

Modify an HTML table and record any modifications as POST requests using Javascript

Is it possible for search engines like google to index Javascript content that is stored within divs and loaded onto the page?

Leveraging a unique JavaScript function in AngularJS from a separate controller or directive

JSON payload with an array that includes nested JSON objects

Make the header stretch to the top of the page using CSS rounded edges

random mongoose response 500

Creating a diagonal division border using CSS alongside a background image

What is the best way to ensure that this header remains adaptable to different screen

Navigating through a JavaScript object array within another object

What steps should I follow to successfully incorporate Zurb Foundation 4 Sections (tabs) into my Javascript Ajax functionality?

PHP reCAPTCHA integration with AJAX functionality

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?

Using CSS to Put Text in the Back of Other Text

Changing the background color of the canvas using Javascript

Hello there! I'm a beginner in React js and I was wondering if you could assist me in transforming this class component into