私はウェブ開発の経験があまりありません。
フォームデータをリクエスト本文で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");
}
全体のアプローチは少し間違った私見です。応答は、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]
コメントを追加