Is it possible to use AJAX Delete request without jquery

Question

I wanted to use AJAX delete request without using jquery is it possible to do that my json object at localhost:8000 looks 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 want to have a delete button which can delete a single record.Code would be 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>

jQuery is javascript, and as such it uses native javascript methods to make ajax requests. So the answer is yes. — Taplar, Aug 25 '20 at 17:46
I would recommend using the newer [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to deal with browser HTTP requests. It has the option to specify the request type as shown [here](https://stackoverflow.com/questions/40284338/javascript-fetch-delete-and-put-requests) — AlpacaFur, Aug 25 '20 at 17:47
Just change 'GET' to 'DELETE', and put your payload between the parens in `send()`. This kind of "is it possible" question usually points toward a lack of research, since there are a plethora of libraries out there that do ajax besides jQuery. — Heretic Monkey, Aug 25 '20 at 19:02
Does this answer your question? [How to make an AJAX call without jQuery?](https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Heretic Monkey, Aug 25 '20 at 19:03

AbsoluteBeginner · Answer 1 · 2020-08-25T19:27:15.240

This should work:

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

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

Another example (maybe clearer):

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

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

Just include in the URL the record you want to delete. E.g: http://localhost:8000/Students/Kaushal. Deletion will be done by the API you're using. — AbsoluteBeginner, Aug 25 '20 at 18:41

score 1 · Answer 2 · answered Aug 25 '20 at 18:00

You can use JS Fetch API to get this done,

const url = 'https://www.example.com/route';

const deleteFetch = async (url) => (
  const response = await fetch(url, {
    method: ‘DELETE’
  });
  
  const myJson = await response.json();  // converting to json
  return myJson ;
}

Is it possible to use AJAX Delete request without jquery

2 Answers2