How to send table data from HTML form submit via ajax call to Spring MVC controller

Question

Say i have a HTML table in a format similar to this

<form> <table id="a">
    <thead>
    <th>Name</th>
    <th>Series</th>
    <th>Value</th>
    </thead>
    <tbody id="b">
    <tr><td>Enhancer</td><td>Enhancement</td><td>50</td></tr>
    <tr><td>Plans</td><td>Plan</td><td>50</td></tr>
    </tbody>
    </table>
    <input type="submit" value="Send" action="SomeControllerAction" /></form>

which has two rows under the headings "Name","Series" and "Value" .

I need to send this data via a form submit to a Spring Controller with Ajax where i can get or set the values for each row iteratively in a Model. I am not sure how to achieve this . That is how to send the data in a table to a spring controller method and get the values .

Help with code segments! Thanks

Answer 1

Although the previous answer is correct, I would suggest to introduce a class that contains three fields : name, series and value. This class should have a meaningful name. Here I named it MyObject because I don't know what you app is about.

MyObject :

public class MyObject {

    private String name, series;
    private Integer value;

    // Getters and setters
}

Controller (the return type might be different)

@PostMapping("/series")
@ResponseBody
public List<MyObject> postSeries(@RequestBody List<MyObject> myObjects) {
    myObjects.forEach(System.out::println);
    // Handle myObjects
    return myObjects;
}

JSP

<table id="tableMyObjects">
    <thead id="a">
    <tr>
        <th>Name</th>
        <th>Series</th>
        <th>Value</th>
    </tr>
    </thead>
    <tbody id="b">
    <tr>
        <td><input type="text" name="name"  /></td>
        <td><input type="text" name="series" /></td>
        <td><input type="text" name="value" /></td>
    </tr>
    <tr>
        <td><input type="text" name="name" /></td>
        <td><input type="text" name="series" /></td>
        <td><input type="text" name="value" /></td>
    </tr>
    </tbody>
</table>
<button id="postButton">Post myObjects</button>

jQuery

$('#postButton').click(function() {
    var myObjects = [];
    $('#b tr').each(function(index, item) {
        var $item = $(item);
        myObjects.push({
            name: $item.find("td input[name='name']").val(),
            series: $item.find("td input[name='series']").val(),
            value: $item.find("td input[name='value']").val(),
        });
    });
    $.ajax({
        url: '/series',
        method: 'POST',
        contentType : 'application/json; charset=utf-8',
        data: JSON.stringify(myObjects)
    })
    .done(function(myObjects) {
        // handle success
    })
    .fail(function() {
        // handle fail
    });
});