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?
JavaScript
x
<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head> <title>Smoke Tests</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></head><body><form method="POST" th:action="@{/save}" th:object="${ankiCardsList}"> <table border="1px"> <thead> <tr> <th>Word</th> <th>Transcription</th> <th>Translate</th> <th>Eng Example</th> <th>Rus Example</th> <th>Sound</th> </tr> </thead> <tbody> <tr th:each="ankiCard : ${ankiCards}"> <td th:text="${ankiCard.word}"></td> <td th:text="${ankiCard.transcription}"></td> <td> <label> <input th:value="${ankiCard.translation}"/> </label> </td> <td> <label> <select> <option th:each="example : ${ankiCard.examples}"> <p th:text="${example.engExample}"></p> </option> </select> </label> </td> <td> <label> <select> <option th:each="example : ${ankiCard.examples}"> <p th:text="${example.rusExample}"></p> </option> </select> </label> </td> <td th:text="${ankiCard.soundURL}"></td> </tr> </tbody> </table> <br> <input type="submit" value="Save"></form></body></html>model AnkiCardDto
JavaScript
@Data@NoArgsConstructorpublic class AnkiCardDto { private String word; private String transcription; private String translation; private List<Examples> examples; private String soundURL;}DTO for response data from table
JavaScript
@Data@NoArgsConstructorpublic class AnkiCardsList { private List<AnkiCardDto> ankiCards = new ArrayList<>();}All code you look there: https://github.com/Teemitze/ankiFIll2
Thanks, for help friends.
Advertisement
Answer
It is easy to send a post request using the JS code below.
JavaScript
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); console.log(translation); ankiCards.push(ankiCard); console.log(JSON.stringify(ankiCard)); } sendRequest(ankiCards) } 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); xhr.open("POST", '/save', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(body); }