JavaScript いいねボタンを押したらDBに保存されるようにしたい

Question

実現したいこと

いいねボタンを押したら、ログインした人（NAME)、がいいねした商品（ID)がH2コンソールに保存されるようにしたい。

発生している問題・分からないこと

何が間違っているのかわからない

該当のソースコード

 <div class="col-md-6">
        <h2 class="product-name">
    <%= itemName != null ? itemName : "<span style='font-size: 14px;'>商品名未設定</span>" %>
    <!-- いいねボタン -->
    <button class="like-button" onclick="likeButtonClick()">いいね</button>
    <span id="likeCount"></span>
    <div id="message" style="color: green; margin-top: 10px;"></div> <!-- メッセージ表示用 -->

    <script>
        function likeButtonClick() {
            const userName = "ユーザー名"; // 実際のログインユーザー名をここに設定
            const productId = "<%= id %>"; // JSPで動的に商品IDを埋め込む

            fetch('LikeServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `NAME=${userName}&ID=${productId}`
            })
            .then(response => response.json())
            .then(data => {
                // いいね数を更新
                document.getElementById('likeCount').textContent = `いいね数: ${data.likeCount}`;
                // 完了メッセージを表示
                document.getElementById('message').textContent = "いいね！が完了しました。";
            })
            .catch(error => {
                console.error('エラー:', error);
                document.getElementById('message').textContent = `エラーが発生しました: ${error.message}`;
            });
        }
    </script>
</h2>

package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class LikeDAO {
    private static final String URL = "jdbc:h2:tcp://localhost/~/han_gw";  // H2接続URL
    private static final String USER = "sa";  // ユーザー名
    private static final String PASSWORD = "";  // パスワード（適切な値に変更）

    public static int addLikeAndGetCount(String ID, String NAME) throws Exception {
        Connection conn = null;
        PreparedStatement insertStmt = null;
        PreparedStatement countStmt = null;
        ResultSet rs = null;

        try {
            // JDBCドライバをロード
            Class.forName("org.h2.Driver");  // H2のJDBCドライバ

            // データベース接続
            conn = DriverManager.getConnection(URL, USER, PASSWORD);

            // データを挿入
            String insertSQL = "INSERT INTO LIKE_TABLE (ID, NAME) VALUES (?, ?)";
            insertStmt = conn.prepareStatement(insertSQL);
            insertStmt.setString(1, ID);
            insertStmt.setString(2, NAME);
            insertStmt.executeUpdate();

            // いいね数を取得
            String countSQL = "SELECT COUNT(*) AS likeCount FROM LIKE_TABLE WHERE ID = ?";
            countStmt = conn.prepareStatement(countSQL);
            countStmt.setString(1, ID);
            rs = countStmt.executeQuery();

            if (rs.next()) {
                return rs.getInt("likeCount");
            } else {
                return 0;
            }
        } finally {
            // リソースの解放
            if (rs != null) rs.close();
            if (insertStmt != null) insertStmt.close();
            if (countStmt != null) countStmt.close();
            if (conn != null) conn.close();
        }
    }
}

package tool;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

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

@WebServlet("/LikeServlet")
public class LikeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userName = request.getParameter("NAME");  // 名前
        String productId = request.getParameter("ID");  // 商品ID

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();

        Connection conn = null;
        PreparedStatement stmt = null;
        ResultSet rs = null;

        try {
            // データベース接続情報
            String url = "jdbc:h2:tcp://localhost/~/han_gw";  // H2の接続URL
            String dbUser = "sa";  // ユーザー名
            String dbPassword = "";  // パスワード（適切な値に変更）

            // H2のJDBCドライバをロード
            Class.forName("org.h2.Driver");
            conn = DriverManager.getConnection(url, dbUser, dbPassword);

            // データを挿入
            String sql = "INSERT INTO LIKE_TABLE (id, name) VALUES (?, ?)";
            stmt = conn.prepareStatement(sql);
            stmt.setString(1, productId);  // 商品ID
            stmt.setString(2, userName);  // ユーザー名
            stmt.executeUpdate();

            // いいね数を取得
            String countSql = "SELECT COUNT(*) AS likeCount FROM LIKE_TABLE WHERE id = ?";
            stmt = conn.prepareStatement(countSql);
            stmt.setString(1, productId);  // 商品ID
            rs = stmt.executeQuery();
            int likeCount = 0;
            if (rs.next()) {
                likeCount = rs.getInt("likeCount");
            }

            // 成功メッセージをJSONで返す
            out.print("{\"likeCount\": " + likeCount + ", \"message\": \"いいね！が完了しました。\"}");
            out.flush();

        } catch (Exception e) {
            e.printStackTrace();
            out.print("{\"likeCount\": 0, \"message\": \"エラーが発生しました: " + e.getMessage() + "\"}");
            out.flush();
        } finally {
            try {
                if (rs != null) rs.close();
                if (stmt != null) stmt.close();
                if (conn != null) conn.close();
            } catch (SQLException se) {
                se.printStackTrace();
            }
        }
    }
}

<%@ page import="java.sql.*, java.io.*" %>
<%
    // データベース接続情報
    String url = "jdbc:h2:tcp://localhost/~/han_gw"; // H2の接続URL
    String user = "sa";
    String password = "";

    // POSTデータを取得
    String userName = request.getParameter("Name");
    String ID = request.getParameter("ID");  // productIdをIDに変更

    Connection conn = null;
    PreparedStatement stmt = null;
    ResultSet rs = null;

    try {
        // レスポンスの設定
        response.setContentType("application/json");  // ここでコンテンツタイプを設定

        // H2のJDBCドライバをロード
        Class.forName("org.h2.Driver");
        conn = DriverManager.getConnection(url, user, password);

        // データを挿入
        String sql = "INSERT INTO LIKE_TABLE (id, name) VALUES (?, ?)";
        stmt = conn.prepareStatement(sql);
        stmt.setString(1, ID);  // productIdをIDに変更
        stmt.setString(2, userName);  // userNameを使用
        stmt.executeUpdate();

        // いいね数を取得
        String countSql = "SELECT COUNT(*) AS likeCount FROM LIKE_TABLE WHERE id = ?";
        stmt = conn.prepareStatement(countSql);
        stmt.setString(1, ID);  // productIdをIDに変更
        rs = stmt.executeQuery();
        int likeCount = 0;
        if (rs.next()) {
            likeCount = rs.getInt("likeCount");
        }

        // 成功メッセージをJSONで返す
        out.print("{\"likeCount\": " + likeCount + ", \"message\": \"いいね！が完了しました。\"}");
        out.flush();

    } catch (Exception e) {
        e.printStackTrace();
        out.print("{\"likeCount\": 0, \"message\": \"エラーが発生しました。\"}");
        out.flush();
    } finally {
        try {
            if (rs != null) rs.close();
            if (stmt != null) stmt.close();
            if (conn != null) conn.close();
        } catch (SQLException se) {
            se.printStackTrace();
        }
    }
%>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

いろいろ調べたがよくわからなかったです。

補足

コードが多くてすみません。有識者の方教えてください。

Comments

[Lhankor_Mhy]

Java タグを追加した方が回答が付きやすそうな気がします。

[webserver2]

コメントありがとうございます。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　そのようにさせていただきます。

[Lhankor_Mhy]

重複質問です。削除リクエストを出してください。
https://teratail.com/questions/gvzldyjg7dqhn8
https://teratail.com/help#posted-otherservice

なお、質問は編集可能です。

[int32_t]

ボタンを押したら、期待に反してどういう動作をするのでしょうか?
サーブレットのコードのどこまで期待通りに動いてますか?

[webserver2]

ボタンを押したら、エラーが発生しましたと出ます。

[int32_t]

「エラーが発生しました」の後、error.message の部分には何と表示されていますか。

[jimbe]

>ボタンを押したら、エラーが発生しましたと出ます。

その文言の直前に色々英文などが出たはずで、それに何処で何が起きたのかが書かれています。

[webserver2]

いいねボタンを押したら、ボタンの下にエラーが発生しましたと緑色で表示されます。

[int32_t]

「エラーが発生しました:」だけで後に何もないですか? もしそうなら、ブラウザの開発者ツールを開いて、その状態でボタンを押して、コンソールへ表示されるエラーを見てください。
また、開発者ツールのネットワークタブも見て、サーブレットとの通信がどうなっているか確認してくさだい。

[jimbe]

LikeServlet クラスの 62 行目を

e.printStackTrace();
↓
e.printStackTrace(out);

とすると詳細が表示されると思います。

[webserver2]

<script>
function likeButtonClick() {
const userName = "ユーザー名"; // 実際のログインユーザー名をここに設定
const productId = "874"; // JSPで動的に商品IDを埋め込む

fetch('LikeServlet', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `NAME=&ID=`
})
.then(response => response.json())
.then(data => {
if (data.success) {
// いいね数を更新
document.getElementById('likeCount').textContent = `いいね数: `;
// 完了メッセージを表示
document.getElementById('message').textContent = "いいね！が完了しました。";
} else {
// エラーメッセージを表示
document.getElementById('message').textContent = "エラーが発生しました。";
}
})
.catch(error => {
console.error('エラー:', error);
document.getElementById('message').textContent = `エラーが発生しました: `;
});
}
</script>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　いいねボタンを押したときのページのソースです。

[int32_t]

ああ、なるほど、JSPの${の問題っぽいですね。

[YT0014]

JavaとJavaScriptは、別モノだと理解されていますか？
ご提示いただいている中では、最初のものがHTML＋JavaScriptだけどJava処理が混じっているのでJSPかと、DAOとしている2つ目と３つ目がJava、最後がHTML＋JavaなのでJSPでしょう。
また、それぞれが、クライアントとサーバのどちらで動作するか、ご理解されていますでしょうか？
エラーメッセージは、サーバで動作した場合、ログに出力されるのですが、ログファイルは確認されていますか？
加えて、「H2コンソール」は、H2データベース用の操作ツールです。
H2データベースそのものではないので、ご認識を改めていただくようお願いいたします。
H2独自の問題の可能性もありますので、「H2 Database」タグの追加もご検討ください

[webserver2]

何をしたら治りますか？

[YT0014]

ところで、DAOと最後のJSPは、使用されていないのでは？

Answer 1

コードを共有していただきありがとうございます。問題が発生している箇所を確認するために、いくつかのポイントを見直してみましょう ●●●●

1. ユーザー名の設定:

   const userName = "ユーザー名"; // 実際のログインユーザー名をここに設定
   

   この部分は固定の文字列になっています。実際のログインユーザー名を取得して変数に代入してください。例えば、サーバーサイドからユーザー名を動的に取得してJavaScriptに渡す必要があります。

2. 商品IDの取得:

   const productId = "<%= id %>"; // JSPで動的に商品IDを埋め込む
   

   JSP内でidが正しく設定されていることを確認してください。

3. JavaScript関数の位置:
   JavaScript関数likeButtonClickが<h2>タグ内に書かれています。通常、JavaScriptはHTMLの<head>タグか<body>タグの末尾に配置します。

4. サーバーサイドのエラーハンドリング:
   LikeServlet内でのエラー処理は問題ないように見えますが、デバッグのために詳細なエラーメッセージを確認することが重要です。

例えば、以下のようにユーザー名と商品IDを動的に取得し、JavaScriptに渡すコードを改善します：

修正案

JSPファイル:

<div class="col-md-6">
    <h2 class="product-name">
        <%= itemName != null ? itemName : "<span style='font-size: 14px;'>商品名未設定</span>" %>
    </h2>
    <!-- いいねボタン -->
    <button class="like-button" onclick="likeButtonClick()">いいね</button>
    <span id="likeCount"></span>
    <div id="message" style="color: green; margin-top: 10px;"></div> <!-- メッセージ表示用 -->

    <script>
        function likeButtonClick() {
            const userName = "<%= session.getAttribute("userName") %>"; // サーバーからユーザー名を取得
            const productId = "<%= id %>"; // JSPで動的に商品IDを埋め込む

            fetch('LikeServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `NAME=${userName}&ID=${productId}`
            })
            .then(response => response.json())
            .then(data => {
                // いいね数を更新
                document.getElementById('likeCount').textContent = `いいね数: ${data.likeCount}`;
                // 完了メッセージを表示
                document.getElementById('message').textContent = "いいね！が完了しました。";
            })
            .catch(error => {
                console.error('エラー:', error);
                document.getElementById('message').textContent = `エラーが発生しました: ${error.message}`;
            });
        }
    </script>
</div>

これにより、実際のログインユーザー名を動的に取得して利用できるようになります。また、JavaScriptの関数をHTMLの末尾に移動することで、全ての要素が読み込まれた後にスクリプトが実行されるようにします。

Answer 2

JSP中に ${式} があるとJavaの式としてサーバ側で処理されてしまうので、JavaScript側で評価してもらうには \${式} と書きます。

Comments

[webserver2]

どこにあるか教えてください。

[int32_t]

「該当のソースコード」の一つ目のソース中に複数あります。