Sending several AJAX request that end up submitting a form causes unexpected result

Sorry for the question title but I don't even know how to ask this D;

Let say my page has some sort of formulary to add data into a list, and every time you want to add new data, it is first inserted into the database, then your page is refreshed (Terrible design, but just imagine for the sake of the example!).

So we have a button that executes an AJAX request. When the server gets the request, it performs some checking and end up returning success. In the AJAX success part, I end up submitting the formulary data that has been inserted in the input field. So, 2 calls are done against the server, first the AJAX request, then the form submit. My browser takes 3 seconds to display the list.

Now imagine I press the button 3 times so fast that the first AJAX request isn't even completed (Just imagine the AJAX request method in the server has a sleep 1000 which gives me time to do so). After 6~ seconds, the browser refreshes and the list has the same data repeated 3 times. I understand why the data appears 3 times as I'm creating three different threads and the code in the server is being executed 3 times (I can see the logs appear 3 times in the console).

But I don't really understand what happens when the first AJAX request reaches a "redirect" or a "render" method. Why is it taking 6~ seconds to render the actual page? Because I could understand to see 3 different "refresh" with 2~ delay but a loading circle appears and I just have to wait. I'm not triggered about the "delay" because the way this is coded is terribly bad and it will change in the future, but I really want to understand why this is happening, and how does a server deal with several AJAX requests when it comes to rendering a new page.

Code example:

View:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>dfsfsd</title>
    <g:javascript library='jquery' />
    <r:layoutResources/>
</head>
<body>

<g:form url="[action:'addToDatabase',controller:'main']" id="addDataForm">
    <label>Data Name</label>
    <input type="text" name="dataName" id="inputDataName">
</g:form>
    <button type="button" id="addToDatabaseButton">Add Data</button>

<script>
    $("#addToDatabaseButton").on( "click", function() {
        $.ajax({
            url: "${createLink(controller: "main", action: "ajaxCheck")}",
            type: "post",
            cache: false,
            success: function () {
                $("#addDataForm").submit();
            }
        });
    });

</script>

</body>
</html>

Server side:

class MainController {

    def index() {
        []
    }

    def addToDatabase() {
        log.error ("We recieve $params.dataName")
        sleep 2000
        redirect(controller: "main", action: "index")
    }

    def ajaxCheck (){
        def map = [:]
        map.put("result","OK")
        render map as JSON
    }
}

Now, there is a 2-second delay that represents me inserting something into the database. There is a log.error to display the item I'm trying to insert. As you can see, when I type "Name A" and I press Add Data, the value is displayed and, after 2 seconds, the page reloads.

But if I keep pressing the button, the 2 seconds delay gets refreshed and I don't understand why I'm not like watching the browser refresh 3 times or something like that, why just once?