Send formdata to Spring MVC using JavaScript Ajax

Question

I am using JavaScript in JSP. I can send the formData to Spring Controller with <form action> but I needed to send through Ajax now. I am not using JQuery or AngularJS or any other JS framework.

my Form here is:

<form:form  id="saveAddressForm" modelAttribute="address">
    <tr>
        <td><label>Address1</label></td>
        <td><input type="text" name="addressLine1"></td>
        <td><label>Address2</label></td>
        <td><input type="text" name="addressLine2"></td>
    </tr>
    <tr>
        <td><label>LandMark</label></td>
        <td><input type="text" name="londMark"></td>
        <td><label>City</label></td>
        <td><input type="text" name="city"></td>
    </tr>
    <tr>
        <td><label>Pincode</label></td>
        <td><input  type="number" name="pincode"></td>
        <td></td>
        <td><input type="submit" value="Save Addess" onsubmit="saveAddress()"></td>
    </tr>
</form:form>

JS function:

function saveAddress(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        // On success i need to display a message.
    }
  };
xhttp.open("POST", "add_address.html", true);
xhttp.send();}

Here, my formdata ie.,Address object not including in request.

@RequestMapping(value = "/add_address", method = RequestMethod.POST)
public String addAddress(@ModelAttribute("address") Address address, Model map)
{

    // Services will be called here.
    return null;
}

I think, I am missing something to add my object to request.

I see couple of posts in SOF, they solved with JQuery or AngularJS. I am not aware of these.

Edit

Thinking how to improve my question. I want "modelAttribute" to send to controller. Not individual param nor through JS frame works.

Community · Accepted Answer · 2017-05-23 12:22:40Z

1

What is the problem ?

You need to add the parameters to build the Adress object.

See Send POST data using XMLHttpRequest

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 28, 2016 at 15:10

J.Mengelle

3433 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chowdappa Over a year ago

My object not going to Controller layer

J.Mengelle Over a year ago

Check your servlet mapping and if it is ok remove @ModelAttribute("address") Address address to see if you pass in your controller.

Mihir Gohel · Accepted Answer · 2016-06-29 14:01:22Z

0

You can use jquery to easily serialize form data and pass with request.

Here is the modified code with jquery.

function saveAddress(){
    var xhttp = new XMLHttpRequest();
    var form = document.getElementById('saveAddressForm');
    var data = new FormData(form);
    xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        // On success i need to display a message.
    }
  };
xhttp.open("POST", "add_address.html", true);
xhttp.send(data);}

edited Jun 29, 2016 at 14:01

answered Jun 29, 2016 at 11:59

Mihir Gohel

3162 silver badges6 bronze badges

3 Comments

Chowdappa Over a year ago

I am not using JQuery.

Mihir Gohel Over a year ago

Okay.. I have edited code here which is pure javascript

Chowdappa Over a year ago

var data = new FormData(form); Is data can refer to Address object? In my controller I am trying to get as Address object. not individual params. Possible??

Collectives™ on Stack Overflow

Send formdata to Spring MVC using JavaScript Ajax

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related