tul6skiu
@tul6skiu
Fibbonacci

Как вернуть результат POST запроса на ту же страницу HTML?

Есть 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>
  • Вопрос задан
  • 121 просмотр
Пригласить эксперта
Ответы на вопрос 1
@mystifier
На поросшем мхом jquery это будет выглядеть как-то так (подразумевается, что backend отдает ответ в виде json):

$('#id-form').submit(function() {
	// заполняем value1,2,3 и т.д 
	$.post($('#id-form').attr('action'), {
		'field1' : value1,
		'field2' : value2,
		'field3' : value3
	// и т.д
	}, function(response) {
		//Выводим результат
	}, 'json');

	return false;
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
МегаФон Нижний Новгород
от 60 000 ₽
IT HUNT Москва
от 180 000 до 250 000 ₽
Почта России Москва
от 140 000 до 160 000 ₽