こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

JavascriptとServletの連携方法

現在学習目的で作成しているプログラムがうまくいきません。
生年月日を入力し、計算ボタンを押すと年齢が表示されるというものです。
ですがボタンを押してもなにも起きません。
いろいろなサイトを手本に手当たり次第に改造修正実行しているのですが、年齢が返ってきません。以下にソースコードを提示いたします。ご質問、ご回答お願い致します。
※学習目的であり、実務とはなんら関係ありません。遠回りに無駄な機能を実装しようとしていることは分かっておりますが、この一連の流れがどのように動くのかを知りたいです。なので「javascriptだけで実装できるじゃん」等思われるかもしれませんが、どうかこの形を維持しての実装方法を提示していただければと考えております。

--NenreiJSP.jsp--
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="year"><br>
<input type="button" id="button" value="計算" onclick="get()"><br>
<input type="text" id="age">
<script type="text/javascript" src="Nenrei.js"></script>

</body>
</html>

--NenreiServlet.java--
package Test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

@WebServlet("/NenreiServlet")
public class NenreiServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{

String Year = request.getParameter("year");

String year = Year.substring(0,4);
String month = Year.substring(4,6);
String day = Year.substring(6);

Nenrei nenrei = new Nenrei();
String age = nenrei.AGE(year, month, day);

JSON Json = new JSON();
Json.age = age;

ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(Json);

response.setContentType("application/json");
response.setHeader("Cache-Control", "nocache");
response.setCharacterEncoding("utf-8");

// JSONを戻す
PrintWriter out = response.getWriter();
out.print(json);

}
}

--Nenrei.java--
package Test;

import java.util.Calendar;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Nenrei {
public String AGE(String year, String month, String day) throws JsonProcessingException {

int Year = Integer.parseInt(year);
int Month = Integer.parseInt(month);
int Day = Integer.parseInt(day);

//現在の年月日
Calendar calendar = Calendar.getInstance();
int yearToday = calendar.get(Calendar.YEAR);
int monthToday = calendar.get(Calendar.MONTH);
int dayToday = calendar.get(Calendar.DAY_OF_MONTH);

//年齢を計算
int age;
age = yearToday - Year;
if (monthToday < Month) {
--age;
} else if (monthToday == Month) {
if (dayToday < Day) {

--age;
}
}

ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(age);

return json;
}
}

--Nenrei.js--


function get(){
document.getElementById("year");

xhr = new XMLHttpRequest();

xhr.onload = setResponseText;

xhr.open("GET", "/ApiTest/NenreiServlet?year=" + year,true);

xhr.send();

}

function setResponseText(){
document.getElementById("age").innerHTML = xhr.responseText;
}

投稿日時 - 2020-08-27 14:36:57

QNo.9791067

困ってます

質問者が選んだベストアンサー

> ageに値を表示もされませんでした。
> inputタグに反映されない理由なんなのかわかりません。

<input type="text" id="age"> とINPUTタグを利用されているので、
document.getElementById("age").innerHTML = xhr.responseText;
ではINPUTタグの value を書き換えられません。
document.getElementById("age").value = xhr.responseText;
にするとINPUTタグの value を書き換えられます。

innerHTML は開始タグと終了タグの間を書き換えます。
<p id="age"> </p>
ならば innerHTML で処理します。

投稿日時 - 2020-08-27 17:20:16

お礼

で、できました!もう何日悩んだかわからないレベルのものが解決しました!
JSON形式のまま表示されるので、あとはJSON.parseかなって感じです。
ありがとうございました!

投稿日時 - 2020-08-27 17:38:05

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

> var year = document.getElementById("year");
> のように修正し

それだと変数に id が year のエレメントオブジェクトが入ってしまい、INPUTタグに入力された値が送信できません。

var year = document.getElementById("year").value;
としないとダメでしょう。

投稿日時 - 2020-08-27 16:45:38

補足

なるほど、ありがとうございます!
早速ご指摘の形に直して実行したところ、エラーをはきませんでした。
ageに値を表示もされませんでした。

function get(){
var year = document.getElementById("year").value;
console.log("1");
xhr = new XMLHttpRequest();
console.log("2");
xhr.onload = setResponseText;
console.log("3");
xhr.open("GET", "/ApiTest/NenreiServlet?year=" + year,true);
console.log("4");
xhr.send();

}

function setResponseText(){
document.getElementById("age").innerHTML = xhr.responseText;
console.log("5");
}
このようにconsole.logを使用してみたところ、問題なく1~5まで出力されました。
inputタグに反映されない理由なんなのかわかりません。
知恵をお貸しください。お願いいたします。

投稿日時 - 2020-08-27 16:58:22

ANo.1

JavaScriptから入力した年を送ろうとしているのだと思いますが、xhr.open の中で使用している year という変数がJavaScript内で定義されていないので、値が送られていないのだと思います。

投稿日時 - 2020-08-27 15:38:38

補足

ご回答ありがとうございます。確かに抜けておりました。jsの二行目を
var year = document.getElementById("year");
のように修正し再実行したところ、jsの13行目xhr.send();でエラー400が出ていることがわかりました。
調べてみたのですが、.send()の役割がよくわかりません。
どのようにしたら解決できるでしょうか。
何度も申し訳ございませんが、お願いいたします。

投稿日時 - 2020-08-27 16:26:56

あなたにオススメの質問