質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • JavaScript

    16322questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    13741questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • jQuery

    6666questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1088questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Java - Ajaxで取得した値をセッションにいれたいです

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 460

akamarukun

score 17

商品一覧JSP

<%@ page import="java.util.ArrayList"%>
<%@ page import="bean.ItemBean"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html>
<html>
    <head>
        <title>ECサイト</title>
        <link href="/ecsite/css/shopping.css" rel="stylesheet" type="text/css" />

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script>
jQuery( function() {
    $(".list").change(function(){
        var value = $("option:selected",this).val();
        var item = $(this).next().val();
            alert(value);
            alert(item);
            var request = {
                    param1 : value,
                    param2 : item
                  };

                  //ajaxでservletにリクエストを送信
                  $.ajax({
                    type    : "GET",          //GET / POST
                    url     : "/ecsite/ajaxitem",  //送信先のServlet URL
                    data    : request,        //リクエストJSON
                    async   : true,           //true:非同期(デフォルト), false:同期
                    success : function(data) {
                      //通信が成功した場合に受け取るメッセージ
                     alert("success");
                    },
                    error : function(XMLHttpRequest, textStatus, errorThrown) {
                      alert("リクエスト時になんらかのエラーが発生しました:" + textStatus +":\n" + errorThrown);
                    }
                  });
        })
    })
</script>

    </head>
    <body>
        <jsp:include page="header.jsp"/>
        <h1>商品一覧</h1>
        <% ArrayList<ItemBean> itemList = (ArrayList<ItemBean>)request.getAttribute("itemList"); %>
        <form action="./ajaxitem" >
            <table class="table_list">

                <tbody>
                    <tr>
                        <!--  <th>商品ID</th> -->
                        <th>商品画像</th>
                        <th>商品名</th>
                        <th>価格</th>
                        <th>在庫数</th>
                        <th>数量</th>
                    </tr>
                    <%-- Beanの要素数分(商品の種類分)テーブルを作成 --%>
                    <% for(ItemBean bean : itemList) { %>
                    <tr>
                        <%-- 商品ID --%>
                        <!--  <td><%= bean.getItemId() %></td> -->
                        <%-- 商品画像 --%>
                        <td><img src ="<%= bean.getItemImage() %>" width="100" height="auto"></td>
                        <%-- 商品名 --%>
                        <td><%= bean.getItemName() %></td>
                        <%-- 価格 --%>
                        <td class="int"><%= bean.getPrice() %></td>
                        <%-- 数量(在庫) --%>
                        <td class="int"><%= bean.getQuantity() %></td>

                        <% if(bean.getQuantity() != 0) { %>

                        <td>
                            <select class="list" name="<%= bean.getItemId() %>list">
                                <% for(int i = 0; i <= bean.getQuantity(); i++) { %>
                                    <option value=<%=i%>><%=i%></option>
                                <% } %>
                            </select>

                            <input type="hidden" name="item" value="<%= bean.getItemId() %>">
                        </td>

                        <%-- 数量(在庫)がない場合は「売り切れ!」と表示 --%>
                        <% } else { %>
                        <td></td>
                        <td class="button">売り切れ!</td>
                        <% } %>
                    </tr>
                <% } %>
                </tbody>
            </table>
             <input class="common_button" type="submit"  value="カート" >


        </form>
        <form action="./ShoppingServlet1">
        <input class="common_button" type="submit" value="次へ">
        </form>
    </body>
</html>

Servlet

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

         HttpSession session = request.getSession();    // セッション
         request.setCharacterEncoding("UTF-8");
         RequestDispatcher dispatcher;

        //パラメータ取得
        String purchase = request.getParameter("param1");
        String itemId = request.getParameter("param2");

        Shopping shopping = new Shopping();
        ArrayList<CartBean> beanList = shopping.getCartItem(purchase, itemId);

        session.setAttribute("cartItem", beanList);

        dispatcher = request.getRequestDispatcher("./cart.jsp");
        dispatcher.forward(request, response);

    }

カートJSP

<%@ page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="bean.CartBean"%>
<jsp:useBean id="user_db" scope="session" class="bean.LoginUserBean" />


<%-- カート画面 --%>
<!DOCTYPE html>
<html>
    <head>
        <title>ECサイト</title>
        <link href="/ecsite/css/shopping.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>
    <body>
        <jsp:include page="header.jsp"/>

<% ArrayList<CartBean> beanList = (ArrayList<CartBean>)session.getAttribute("cartItem"); %>

        <form action="./ResultServlet" method="post">
            <table class="table_list">
                <tbody>
                    <tr>
                        <!-- <th>商品ID</th>-->
                        <th>商品画像</th>
                        <th>商品名</th>
                        <th>価格</th>
                        <th>購入数</th>
                    </tr>
                    <% for(CartBean bean : beanList) { %>

                    <tr>
                        <%-- 商品画像 --%>
                        <td><img src="<%= bean.getItemImage() %>" width="100" height="auto"></td>
                        <%-- 商品名 --%>
                        <td><%= bean.getItemName() %></td>
                        <%-- 価格 --%>
                        <td><%= bean.getPrice() %></td>
                        <%-- 購入数 --%>
                        <td><%= bean.getPurchase() %></td>
                    </tr>
                    <% } %>
                </tbody>
                </table>
                </form>
    </body>
</html>

現在、勉強でショッピングカートを作っています。
流れなんですが、商品一覧画面があって、個数をセレクタで選べるようにしていて、その値をAjaxで取得して、サーブレットに送り、セッションに保存してカートの画面をJSPで表示する、を実現したいです。
サーブレット上では、値は取得できているのですが、どうもうまくJSP上では、空になっておる、渡せません。

どこが違うのか、ヒントだけでもいただけたらありがたいです。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

そもそもsession自体がjspに宣言されていないからではないでしょうか。

JSPにも下記を書けば良いかと。

HttpSession session = request.getSession(true);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/28 16:21

    暗黙オブジェクトで、宣言せずに使用できるはずです。

    キャンセル

  • 2018/06/28 16:25

    まず書いてみてから言ってください。
    あくまで懸念です。

    キャンセル

  • 2018/06/28 16:33

    失礼しました。
    試してからコメントしたんですが、書き方が悪かったです。

    キャンセル

  • 2018/06/28 17:21

    そもそもですが、提示のサーブレットソースは/ecsite/ajaxitemですよね?
    Ajaxはあくまで非同期でサーバープログラムを実行するものなので、Ajaxで呼び出されたプログラムに直にdispatcher.forward()書いても意味がないように思います。
    実行元のsuccess  に返ってきているだけのはずです。
    例えばサーブレット側では取得した情報をJSON形式などにして返して、successで受け取ったdataをJavaScriptで整形してHTMLに還元する ような使い方が本来だと思います。

    キャンセル

  • 2018/06/29 10:30

    解決いたしました。
    > Ajaxで呼び出されたプログラムに直にdispatcher.forward()書いても意味がないように思います。
    を基に、jspを呼び出すプログラムを別のサーブレットに任せたら、値渡せました。
    ありがとうございました。

    キャンセル

  • 2018/06/29 10:31

    解決できたようで何よりです。Ajaxで呼び出すプログラムは画面を出力するわけではなくAPIとして結果を返すように作るものなので、念頭に入れておく必要があります。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16322questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Java

    13741questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • jQuery

    6666questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1088questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。