Delete data [DELETE] using Java Web Service and jQuery Ajax

Hey guys, Bushan here, welcome back to B2 Tech! Today in this article I will show you how to make DELETE request/Delete data using Spring REST and jQuery Ajax, so let’s get started.



I have already created the required Java web service, let’s see the web service first

http://localhost:8037/spring-mvc-restfull-crud-example/book/{id}

I have created this web service using Java Spring REST. You can create this web service using any server-side technology.

Next step is to provide a Delete button to the user when the user clicks the Delete button we need to make ajax DELETE request and delete the record. I will make use of the web page that we have created in the previous article. Design a web page that looks like this,



Now write a function for delete book, inside the function will call jquery ajax method,

function deleteBook(id){
    $.ajax({
        url: 'http://localhost:8037/spring-mvc-restfull-crud-example/book/'+id,
        method: 'DELETE',
        success: function () {
            alert('record has been deleted');
            getAllBooks();
        },
        error: function (error) {
            alert(error);
        }
    })
}

write one more function for resetting the textbox values,

function reset(){
    $('#txtTitle').val('');
    $('#txtAuthor').val('');
}

Here is the complete code,



<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type = "text/javascript">
        $(document).ready(function () {
            var book = {};
            getAllBooks();
            $('#btnAddBook').click(function () {
                book.title = $('#txtTitle').val();
                book.author = $('#txtAuthor').val();
                var bookObj = JSON.stringify(book);
                $.ajax({
                    url: 'http://localhost:8037/spring-mvc-restfull-crud-example/book',
                    method: 'POST',
                    data: bookObj,
                    contentType: 'application/json; charset=utf-8',
                    success: function () {
                        alert('Saved successfully');
                        getAllBooks();
                        reset();
                    },
                    error: function (error) {
                        alert(error);
                    }
                })
            })
        })

        function getAllBooks() {
            $.ajax({
                url: "http://localhost:8037/spring-mvc-restfull-crud-example/book",
                method: "GET",
                dataType: "json",
                success: function (data) {
                    var tableBody = $('#tblBook tbody');
                    tableBody.empty();
                    $(data).each(function (index, element) {
                        tableBody.append('<tr><td>'+element.title+'</td><td>'+element.author+'</td><td><button onclick = "deleteBook('+element.id+')">Delete</button></td></tr>');
                    })
                },
                error: function (error) {
                    alert(error);
                }
            })
        }

        function deleteBook(id){
            $.ajax({
                url: 'http://localhost:8037/spring-mvc-restfull-crud-example/book/'+id,
                method: 'DELETE',
                success: function () {
                    alert('record has been deleted');
                    getAllBooks();
                },
                error: function (error) {
                    alert(error);
                }
            })
        }

        function reset(){
            $('#txtTitle').val('');
            $('#txtAuthor').val('');
        }
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>Title</td>
                <td><input type="text" id = "txtTitle"></td>
            </tr>
            <tr>
                <td>Author</td>
                <td><input type="text" id = "txtAuthor"></td>
            </tr>
            <tr colspan = "2">
                <td><input type="button" value="Add Book" id="btnAddBook"></td>
            </tr>
        </table>
        <table border = "1" id = "tblBook">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
</html>

That’s it for this article, I hope this article helped you in one or the other way, if you have any questions, leave your questions in the comment section I will try to answer it. In our next article will discuss the PUT request/updating the record using jQuery ajax. I will see you in the next article.



Download the fileDownload

 

About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *