Я использую сервлеты Java и не могу перенаправить на другую страницу после отправки формы и отправки данных в формате JSON

Question

У меня нет большого опыта в веб-разработке.

Я хочу отправить данные формы в теле запроса в формате JSON.Когда сервер получает данные, он должен зарегистрировать нового пользователя и перенаправить пользователя на другую страницу с данными пользователя.Десериализация и регистрация в базе данных работает хорошо.Основная проблема заключается в том, что после отправки данных формы на сервер страница получает ответ с новой страницей (URL и содержимым), но только в заголовках и не изменяется.Как я могу изменить страницу после отправки данных формы ??

Вот обработка Javascript и HTML-код формы:

<script>
function makeJSON(form) {

    var userData = {

        "phone_number" : form.phone_number.value,
        "country" : form.country.value,
        "city" : form.city.value,
        "date_of_birth" : form.date_of_birth.value,
        "email" : form.email.value,
        "sex" : form.sex.value,
        "login" : form.login.value,
        "password" : form.password.value

    };

    var requestString = JSON.stringify(userData);

    var request = new XMLHttpRequest();

    request.open("POST", "/registration");
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    request.send(requestString);

}

<div id="topNavLine"></div>

<div class="regBody">
    <div class="regFormTop"><h1>Registration form</h1></div>
    <form id="registration" method="post" onsubmit="makeJSON(this);" enctype="application/x-www-form-urlencoded">
        <fieldset>
            <legend>Personal data</legend>
            <p><label>Phone:</label><input name="phone_number" type="text" form="registration"></p>
            <p><label>Country:</label><input name="country" type="text" form="registration"></p>
            <p><label>City:</label><input name="city" type="text" form="registration"></p>
            <p><label>Date:</label><input name="date_of_birth" type="date" form="registration"></p>
            <p>
                <Label>Email:</Label><input name="email" type="text" form="registration"></p>
            <p><label>Sex:</label>
                M<input type="radio" name="sex" value="male">
                F<input type="radio" name="sex" value="female">
            </p>
        </fieldset>
        <fieldset>
            <legend>Login data</legend>
            <p><label>Login:</label><input name="login" type="text" form="registration"></p>
            <p><label>Password:</label><input name="password" type="password" form="registration"></p>
            <p><label>Confirm password:</label><input name="passwordValidation" type="password" form="registration"></p>
        </fieldset>

        <div class="regButton">
            <button class="regButton" type="submit"  form="registration">Register</button>
        </div>

    </form>
</div>

Вот метод сервлета doPost:

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


    String str = request.getReader().lines().collect(Collectors.joining());

    System.out.println(str);

    UserRegData userRegData = new ObjectMapper().readValue(str,UserRegData.class);

    long tmpId = new Random().nextLong();
    if (tmpId < 0) {
        tmpId *= -1;
    }
    userRegData.setId(tmpId);
    userRegData.printUser();

    try (Connection connection = ConnectionWithDB.connectToDB()) {

        ManagingData.setRegistrationData(userRegData, connection);

    } catch (SQLException e) {
        e.printStackTrace();
    }

    response.setStatus(201);
    response.sendRedirect("/page_of_user");

}

Answer 1

Весь подход немного неверен ИМХО.Ответ должен обрабатываться функцией обратного вызова в javascript.Если есть ошибки валидации, например, вы можете показать их в той же форме.Если все успешно, то в javascript вы вызываете 'page_of_user'.

Вот JQuery в действии:

$.ajax({
        type: "POST",
        url: "/registration",
        data: userData ,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){ document.location.href='/page_of_user'; },
        failure: function(errMsg) {
            alert(errMsg);
        }
  });