0

jQueryの関数のおかげでjspページからサーブレットを呼び出し、同じページに結果を公開するWeb アプリを作成しようとしています。これまでのところ、ウェブを検索しても運がありませんでした。初心者なので、おそらく何か間違ったことをしているのですが、何がわかりません。$.post(...)

問題を次のMWEに合理化することができました。私のプロジェクトのサーブレットはTest次のようになります。

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

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
            doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {
            String temp = request.getParameter("param");
            request.setAttribute("result", temp);
            RequestDispatcher view = request.getRequestDispatcher("/index.jsp");
            view.forward(request, response);
    }
}

myindex.jspが次の場合、Web アプリは期待どおりに動作します。

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
    <p>Result: ${result}</p>
    <form method="post" action="/Test/servlet">
        <input name="param" value="value" />
        <button type="submit">Send!</button>
    </form>
</body>
</html>

Web アプリをTomcat 7.0.47コンテナーにデプロイすると、実際には、 にResult:初期化された入力フィールドvalueとSend!ボタンを含むページが表示されます。ボタンを押すと、サーブレットに適切に到達し/Test/servlet、ページが読み込まれますResult: value。ただし、私のプロジェクトでは、jQueryの関数$.post(...)を使用してパラメーターをサーブレットにポストし、属性を取得することになっているため、 myindex.jspを次のコードに置き換えました。

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    function send() {
        var value = $('#field').val();
        alert('Sending: ' + value);
        $.post('/Test/servlet', {
            param : value
        }, function(result) {
            alert('Done!');
        }, 'html');
    }
</script>
</head>
<body>
    <p>Result: ${result}</p>
    <form action="/">
        <input id="field" value="value" />
        <button type="button" onclick="send()">Send!</button>
    </form>
</body>
</html>

今回は、Web アプリをデプロイしてボタンを押すと、2 つのメッセージ ウィンドウが表示されます。1 つ目は( jQuery 2.0.3が適切に解決されているSending: valueことを意味します)、2 つ目は. 明らかに、ページは を反映するように更新されていません。サーブレットは変更されていないので、サーブレットが適切に解決されていないのではないかと思います。そこで、、 、、、、およびに置き換えようとしましたが、うまくいきませんでした。ただし、メッセージが届かないことに気付きました（使用している彼女など）。Done!Result: value/Test/servlet/Test/servlet/Test/servlet/Test/servlet/servlet//servletservlet/servletDone!/servlet

結論として、私が間違っていることは何ですか？私が理解できるように、バックグラウンドで何が起こっているのか説明してもらえますか? 前もって感謝します！

encoding_idiotの助けのおかげで、コードが機能しない理由をようやく理解することができました。他の誰かにも役立つことを願って、以下の調査結果を共有します。

簡単に言えば、上記の 2 つの方法は同等ではありません。少なくともこれらの点では同等ではありません。実際、最初のメソッドは、最初のページを置き換えるページを生成するサーブレットを呼び出します。代わりに、2 番目の方法は、必ずしも置き換えられるとは限らない最初のページに戻されるページを生成するサーブレットを呼び出します。返されたデータは、 coding_idiotで提案されているように、ユーザーに表示されるようにどこかに注入する必要があります。

これは、上記のコードをリファクタリングして実際の例を取得する方法です。サーブレットのコードは変更されませんが、doPost(...)メソッドの最後から 2 行目は次のようになります。

RequestDispatcher view = request.getRequestDispatcher("/results.jsp");

次に、上記のページを 2 つの異なる部分に分割しました。1 つ目はindex.jsp、ユーザーが Web アプリのアドレスを要求したときにコンテナーによって自動的に読み込まれるものです。

<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    function send() {
        $.post('/Test/servlet', {
            param : $('#field').val()
        }, function(result) {
            $("#result").html(result);
        }, 'html');
    }
</script>
</head>
<body>
    <form>
        <input id="field" value="value" />
        <button type="button" onclick="send()">Send!</button>
    </form>
    <div id="result">
        <p>Result: --</p>
    </div>
</body>
</html>

フォームは以前とほぼ同じ<div id="result">ですが、 のデフォルト値を含む があることに注意してくださいresult。もう 1 つの違いは、を計算するために が呼び出される関数send()にあります。これはSend!の後に上記に挿入されます。ボタンが押されます。上で示したように、サーブレットはリクエストをレスポンスに転送します。レスポンスは次のとおりです。/Test/servletresultresult<div id="result">results.jsp

<p>Result: ${result}</p>

ユーザーがSend!ボタンを押すと、入力フィールドの値がパラメーターとしてサーブレットに渡され、サーブレットはパラメーターを引数に変換して、指定されたページに転送します。このページが解釈されると、予想されるメッセージ ( ) が作成され、に含まれる場所にResult: value返され、最終的に表示されます。index.jsp<div id="result">

のすぐ内側で$.post(...)を宣言せずに、最初の方法とまったく同じように動作させることができるかどうか疑問に思います。この好奇心を満たすための提案やアイデアを事前に感謝します。<div id="result"><body>

4

1 に答える 1