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?
<!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
@Data
@NoArgsConstructor
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
@Data
@NoArgsConstructor
public 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.
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);
}