Skip to content

How I can send POST request with data from table?

I want to send POST request with data which is stored in a HTML table. I’m using thymleaf.

I tried to send GET request with data for build table, but I didn’t get the response data from the table while using the POST request.

What is the problem?

<html xmlns:th="">
    <title>Smoke Tests</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<form method="POST" th:action="@{/save}" th:object="${ankiCardsList}">
    <table border="1px">
            <th>Eng Example</th>
            <th>Rus Example</th>
        <tr th:each="ankiCard : ${ankiCards}">
            <td th:text="${ankiCard.word}"></td>
            <td th:text="${ankiCard.transcription}"></td>
                    <input th:value="${ankiCard.translation}"/>
                        <option th:each="example : ${ankiCard.examples}">
                            <p th:text="${example.engExample}"></p>

                        <option th:each="example : ${ankiCard.examples}">
                            <p th:text="${example.rusExample}"></p>
            <td th:text="${ankiCard.soundURL}"></td>
    <input type="submit" value="Save">

model AnkiCardDto

public class AnkiCardDto {
    private String word;
    private String transcription;
    private String translation;
    private List<Examples> examples;
    private String soundURL;

DTO for response data from table

public class AnkiCardsList {
    private List<AnkiCardDto> ankiCards = new ArrayList<>();

All code you look there:

Thanks, for help friends.



It is easy to send a post request using the JS code below.

function AnkiCard(word, transcription, translation, examples, soundURL) {
            this.word = word;
            this.transcription = transcription;
            this.translation = translation;
            this.examples = examples;
            this.soundURL = soundURL;

        function Examples(engExample, rusExample) {
            this.engExample = engExample;
            this.rusExample = rusExample;

        function sendTable() {
            let cells = document.getElementsByTagName("tr");

            let ankiCards = [];

            for (let i = 1; i < cells.length; i++) {
                let word = cells[i].getElementsByTagName("td").item(0).innerText;
                let transcription = cells[i].getElementsByTagName("td").item(1).innerText;
                let translation = cells[i].getElementsByTagName("td").item(2).getElementsByTagName("input").item(0).value;
                let engExample = cells[i].getElementsByTagName("td").item(3).getElementsByTagName("option");
                let selectEngExample = findSelectExample(engExample);

                let rusExamples = cells[i].getElementsByTagName("td").item(4).getElementsByTagName("option");
                let selectRusExample = findSelectExample(rusExamples);

                let examples = new Examples(selectEngExample, selectRusExample);

                let soundURL = cells[i].getElementsByTagName("td").item(5).innerText;

                const ankiCard = new AnkiCard(word, transcription, translation, examples, soundURL);






        function findSelectExample(examples) {
            for (let i = 0; i < examples.length; i++) {
                if (examples[i].selected === true) {
                    return examples[i].innerText;

        function sendRequest(ankiCards) {
            var xhr = new XMLHttpRequest();

            var body = JSON.stringify(ankiCards);

  "POST", '/save', true);
            xhr.setRequestHeader('Content-Type', 'application/json');

User contributions licensed under: CC BY-SA
8 People found this is helpful