Есть html страница где нужно заполнить форму и при нажатие на кнопку выполняется пост запрос, и я бы хотел вернуть результат на ту же страницу html, c помощью ajax.
1) Я бы хотел возвращать фрагмент страницы как результат в блок id = resultsBlock.
2) Или же я бы хотел бы иметь еще одно поле в блоке id = resultsBlock. и возвращать туда результат.
Подскажите кто знает как можно это сделать?. Если не сложно приведите пример кода.
Спасибо.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" id="bootstrap-css"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hi <span></span>, Добро пожаловать на лучший Конвертер валют</h2>
<form class="col-sm-9" method="POST" role="form" th:action="@{/convert}" th:object="${converter}">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="inputState">State</label>
<select id="inputState" class="form-control" required th:field="*{currentName}">
<option th:each="test : ${valutName}"
th:value="${test.getName()}"
th:text="${test.getName()}">
</option>
</select>
</div>
<div class="col-sm-6">
<label for="inputState2">State</label>
<select id="inputState2" class="form-control" required th:field="*{sourceName}">
<option th:each="test : ${valutName}"
th:value="${test.getName()}"
th:text="${test.getName()}">
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label">amount</label>
<input autofocus class="form-control" id="count" placeholder="count"
required th:field="*{count}" type="text">
</div>
</div>
</div>
<div id="resultsBlock">
<div id="content"></div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<button id="bt1" name="searchButton" type="button">Convert</button>
</div>
</div>
</div>
</form>
<a th:href="@{/logout}">Sign out</a>
</div>
</body>
</html>
Средний
Простой