Javaサーブレットを使用していますが、フォームを送信してJSON形式でデータを送信した後、別のページにリダイレクトできません

アンドレイ・スルチャヌ

私はウェブ開発の経験があまりありません。

フォームデータをリクエスト本文で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");

}
Rey333

全体のアプローチは少し間違った私見です。応答は、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);
        }
  });

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ