JavascriptとServletの連携方法

2020/08/27 14:36

このQ&Aのポイント

JavascriptとServletの連携方法について学習中ですがうまくいきません。年齢を計算するプログラムで、計算ボタンを押しても反応がありません。ソースコードを修正したり他のサイトを参考にしても解決できません。どのように動くのかを知りたいので、この形を維持しての実装方法を教えてください。
NenreiJSP.jspとNenreiServlet.javaとNenrei.jsの連携方法について教えてください。年齢を計算するプログラムを作成していますが、計算ボタンを押しても年齢が表示されません。ソースコードは正しいと思いますが、何が原因でしょうか？ご教授願います。
JavascriptとServletを連携して年齢を計算するプログラムを作成していますが、正しく動作しません。計算ボタンを押しても年齢が表示されず、他のサイトや質問サイトも参考にしましたが解決策が見つかりません。このコードの問題点や改善方法を教えていただけないでしょうか？

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; }

sad_Ill
お礼率33% (1/3)

Java
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

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

ベストアンサー

t_ohta
ベストアンサー率38% (5238/13705)

2020/08/27 17:20 回答No.3

＞　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:38

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

その他の回答 (2)

t_ohta
ベストアンサー率38% (5238/13705)

2020/08/27 16:45 回答No.2

＞　var year = document.getElementById("year"); ＞　のように修正しそれだと変数に id が year のエレメントオブジェクトが入ってしまい、INPUTタグに入力された値が送信できません。 var year = document.getElementById("year").value; としないとダメでしょう。

質問者

補足 2020/08/27 16:58

なるほど、ありがとうございます！早速ご指摘の形に直して実行したところ、エラーをはきませんでした。 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を使用してみたところ、問題なく１～５まで出力されました。 inputタグに反映されない理由なんなのかわかりません。知恵をお貸しください。お願いいたします。

t_ohta
ベストアンサー率38% (5238/13705)

2020/08/27 15:38 回答No.1

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

質問者

補足 2020/08/27 16:26

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

JavascriptとServletの連携方法

JavascriptとServletの連携方法

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

お礼 2020/08/27 17:38

その他の回答 (2)

補足 2020/08/27 16:58

補足 2020/08/27 16:26

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう