How to submit spring form in Ajax jquery with Modelattribute

To submit a Spring form in Ajax jQuery with ModelAttribute, you can follow these general steps:

1. Add the jQuery library to your web page. You can either download the library and include it in your web page, or reference it directly from a content delivery network (CDN).
2. Write a JavaScript function that will handle the form submission. In this function, you will create an Ajax request and send the form data to the server.
3. Bind the form submit event to the JavaScript function using the jQuery `submit()` method.
4. On the server-side, create a Spring Controller that will handle the form submission. In this Controller, you will receive the form data as a `ModelAttribute` object and return a response to the client.

Here is an example code snippet that demonstrates how to submit a Spring form in Ajax jQuery with ModelAttribute:

<!-- Include jQuery library -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Define your form -->

<form id="myForm" action="/submitForm" method="post" th:object="${formObject}">

    <!-- Define your form fields -->

    <input type="text" th:field="*{firstName}" />

    <input type="text" th:field="*{lastName}" />

    <button type="submit">Submit</button>

</form>

<!-- Define the JavaScript function to handle the form submission -->

<script>

    $(document).ready(function() {

        $("#myForm").submit(function(e) {

            e.preventDefault(); // prevent the form from submitting normally

            var form = $(this);

            var url = form.attr('action');

            var data = form.serialize(); // serialize the form data

            $.ajax({

                type: "POST",

                url: url,

                data: data,

                success: function(response) {

                    // handle the response from the server

                },

                error: function(xhr) {

                    // handle any errors that occur

                }

            });

        });

    });

</script>

// In your Spring Controller

@PostMapping("/submitForm")

public ResponseEntity<String> submitForm(@ModelAttribute("formObject") FormObject formObject) {

    // handle the form submission

    return new ResponseEntity<>("Form submitted successfully", HttpStatus.OK);

}

This example code shows how to submit a Spring form using Ajax jQuery with ModelAttribute. The form data is serialized and sent to the server using an Ajax request, and the response is handled in the `success` and `error` callbacks of the Ajax request. On the server side, the form data is received as a `ModelAttribute` object and processed as needed.