0

JQuery、JSON、および AJAX に関する本を何冊か読みました。jsp とサーブレットの古いテクノロジを使用していた作業中の Web サイトを、JSON、AJAX、および JQuery を使用する jsp に変換しようとしています。必要なことを行うためにすべてを統合するのに苦労しています。

1) ユーザーは単純な jsp 'login.jsp' を使用してログインします。次の宛先に送信します。

<form action="http://localhost:8080/sc_demo/dispatcher" name="login" id="login">
        <div>
        <label for="userId" class="label">UserId</label>
        <input type="text" name="userId" id="userId" size="30">
        </div>
        <div>
        <label for="password" class="label">Password</label>
        <input type="password" name="password" id="password" size="30">
        </div>
        <div>
        <label for="organization" class="label">Organization</label>
        <input type="text" name="organization" id="organization" size="30">
        </div>
        <div>
            <input type="hidden" name="event" id="event" value="_login">
            <input type="submit" name="submit" id="submit" value="Login">
        </div>
    </form>

2) ディスパッチャ サーブレットはリクエストを受信し、_login のイベント値を使用して、認証を行う EventHandler を呼び出し、ユーザー「トークン」を作成します。次に、以下を使用します。

Token userToken = new Token(userId, userName, organization, role, new GenericNotifier());
String jspPath = "/home.jsp?parms="+userToken.getResponseString("/home.jsp", "HR", "tasklist");
getServletContext().getRequestDispatcher(jspPath).forward(
                request, response);

3) これにより、jsp "home.jsp" が正しく表示されます。
4) home.jsp には

    <script type="text/javascript" src="_js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="_js/nav1.1.min.js"></script>
<script type="text/javascript" src="_js/jquery.countdown.js"></script>
<script type="text/javascript" src="_js/parseURL.js"></script>
<script type="text/javascript" src="_js/header.js"></script>

ページのヘッダーに。5) header.jsp には次のものがあります。

    <!DOCTYPE HTML>
<%@ page  import="java.util.*" %>

<%
        String userToken = (String)request.getParameter("parms"); // from login

 %>
 <script>
     $(document).ready(function(){
        var data = $.parseJSON('<%=userToken%>');

        alert('app = '+data.app);
        $('#doApplication').text(data.app);
     });
  </script>
      <div id='doApplication'></div>                                         
    <hr>

今、問題は、userToken から何も解析できないことです。以下は、ページ ソースの一部です。

<!DOCTYPE html>





<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home</title>
<script type="text/javascript" src="_js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="_js/nav1.1.min.js"></script>
<script type="text/javascript" src="_js/jquery.countdown.js"></script>
<script type="text/javascript" src="_js/parseURL.js"></script>
<script type="text/javascript" src="_js/header.js"></script>

    <script type="text/javascript" src="./_js/jquery.validate.min.js"></script>

    <!-- jQuery UI Theme -->
    <link type="text/css" href="./_js/alpaca/lib/jquery-ui-latest/jquery-ui-latest.custom.css" rel="stylesheet"/>

    <!-- Additional CSS -->
    <link type="text/css" href="./_js/alpaca/examples/css/960.fluid.css" rel="stylesheet"/>

    <script type="text/javascript" src="https://use.typekit.com/fnm3kpm.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!-- LINK REL="stylesheet" HREF="_css/site.css" / -->
<LINK REL="stylesheet" HREF="_css/home.css" />
<LINK REL="stylesheet" HREF="_css/jquery.countdown.css" />

   </head>
    <body> 
        <div class="wrapper">
            <div class="header">











 <script>
     $(document).ready(function(){
        var data = $.parseJSON('{jsp:"home.jsp",app:"HR",process:"tasklist",userToken:  {result:"S",tokenId:"98797",userID:"woo",userName:"John",organization:"Shoulders",role:"mgr",notifierId:"956597"}}');
        if( token != null )
        {
            $('#token').text(token);
        }

        alert('app = '+data.app);
        $('#doApplication').text(data.app);
     });
  </script>

.parseJSON('X'); の文字列 X を確認しました。スペースも改行もありません。有効な JSON オブジェクトのようです。それを解析しませんか？エラーは発生しませんが、そこにあるはずの data.app の値を含むアラート フィールドも表示されません。

私の一般的な問題は、ページ フローが「事前定義」されていない例が見当たらないことです。私の場合、各アクションは、現在の状態 (userToken から) とフォーム データに関する情報を含む、ディスパッチャへの送信 (できれば AJAX を使用) を生成します。フォーム データに応じて、ディスパッチャは次の jsp を決定し、リクエスト/レスポンスを使用して、userToken とそのページ フォームに表示される情報を使用してそのページに戻ります。

では、フォーム データをディスパッチャーに送信し、各ページの上部にある $(document).ready 関数で応答データをキャッチし、解析して表示するにはどうすればよいでしょうか?

4

0 に答える 0