Updated April 10, 2023
Defintion of jQuery ajax delete
The jQuery ajax delete is used to delete the resource from the server. The jQuery ajax delete request is passed to the ajax() function as a value to the type option. A jQuery type option is a built-in option that is passed to the ajax() function in the jQuery. The ajax() function is used to perform an asynchronous HTTP request to the server and by using the delete value for the type option it describes to the server that the specific data is to be deleted. The get() function and post() function are available for the get and post request respectively, but for the delete request, no such function is available.
The syntax of the jQuery ajax delete –
$.ajax({type : 'DELETE'});Parameters –
- type – This is an option. It is used to specify the type of asynchronous HTTP request sent. The possible values for the type option are GET, POST, PUT, and DELETE. The default value is GET which sends the GET request.
- Return value – The ajax type option does not return any value.
The working of the ajax delete request
The jQuery ajax delete request is passed to the ajax() function with the type option value to specify what type of request is sending to the server. Suppose we have to do the asynchronous HTTP DELETE request, to delete the data available at the server. So we can use the ajax() function with type option as “$.ajax( ‘http://time.jsontest.com’, { type : “DELETE});”, where the first parameter is the URL of the data that to delete. So, if the request successful means that the specified data will get deleted.
Examples of jQuery ajax delete request
Example of jQuery ajax delete to delete the data by using ajax() function with the type option.
Example #1
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax delete </title>
</head>
<body>
<h3> This an example of jQuery ajax delete: </h3>
<button id = "Btn" > Send the ajax delete request. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url of the data that is to be delete
var ajxReq = $.ajax( 'http://time.jsontest.com', {
type : 'DELETE'
});
ajxReq.success( function ( data, status, jqXhr ) {
$( "p" ).append( "Request is Success." );
});
ajxReq.error( function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "Request is Fail.");
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, when we click on the button, the ajax() function will call which sends the HTTP request to the server to delete the data. The first parameter mentioned the URL of the data to be deleted then used the success() callback function on the XMLHttpRequest object( return object of the ajax() function) to display the notification message on the success of the delete request and also used the error() function on the XMLHttpRequest object( return object of the ajax() function) to display the notification message on the fail of the delete request. The ajax delete request is sending by the code “$.ajax( ‘http://time.jsontest.com’, { type : ‘DELETE’ });”. Next, whether the delete request is a success or not will notify by the message, as we can see in the above output.
Example of jQuery ajax delete to delete the data by using ajax() function with type option –
Example #2
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax delete </title>
</head>
<body>
<h3> This an example of jQuery ajax delete: </h3>
<button id = "Btn" > Send the ajax delete request. </button>
<br>
<p style = "color : red"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Btn').click( function(){
// url of the data to be delete
var ajxReq = $.ajax( {
url : 'http://time.jsontest.com',
type : 'DELETE',
success : function ( data ) {
$( "p" ).append( "Delete request is Success." );
},
error : function ( jqXhr, textStatus, errorMessage ) {
$( "p" ).append( "Delete request is Fail.");
}
});
});
});
</script>
</body>
</html>An output of the above code is –
Once we click on the “Get p children” button, the output is –
In the above code, when we click on the button, the ajax() function will call which sends the HTTP request to the server to delete the data. The first parameter mentioned the URL of the data to be deleted then used the success() callback function to display the notification message on the success of the delete request and also used the error() callback function to display the notification message on the fail of the delete request. The ajax delete request is sending by the code “$.ajax(‘http://time.jsontest.com’, { type : ‘DELETE’ });”. Next, whether the delete request is a success or not will notify by the message, as we can see in the above output.
Conclusion
The jQuery ajax delete request is used to send the delete request to the server to delete some data which is available at the specified URL. Like get() function and post() function the delete request is not having such function. The ajax delete request is specified as a value to the type option.
Recommended Articles
This is a guide to jQuery ajax delete. Here we discuss definition, syntax, and working of the ajax delete request with examples. You may also have a look at the following articles to learn more –
