How to return the result of a POST request to the same HTML page?

A

Alexander Batula2020-02-21 16:12:41

Java

Alexander Batula, 2020-02-21 16:12:41

There is an html page where you need to fill out a form and when a button is clicked, a post request is made, and I would like to return the result to the same html page, using ajax.
1) I would like to return a page fragment as a result in an id = resultsBlock block.
2) Or I would like to have one more field in the block id = resultsBlock. and return the result there.
Can anyone tell me how this can be done? If not difficult, give an example code.
Thank you.

<!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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

mystifier, 2020-02-21
@mystifier

On a moss-covered jquery, it will look something like this (it is assumed that the backend returns the answer in the form of json):

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

  return false;
});