0

私はAJAXとJSONに慣れていないので、チュートリアルを見ていますが、その部門は私にとっては多すぎるようです。

AJAX と JSON がどのように機能するかを確認するために単純なログインを作成することにしましたが、開始方法がわかりません。必要だと言う人もいればlibrary jars、ただのことだと言う人もいますjavasrcipt

これが私の簡単なログインjspページです

<body>
    <form action="LoginController" method="post">
        <!-- Login body -->
        <table>
            <tr>
                <td><label for="userName" >Username:</label></td>
                <td><input type="text" name="userName" /></td>
            </tr>
            <tr>
                <td><label for="password" >Password:</label></td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td><input type="submit" /></td>
            </tr>
        </table>
    </form>
</body>

ユーザーが適切なユーザー名とパスワードを入力しないと更新されないようにJSON+を適用するにはどうすればよいですかAJAX

ちなみに私のコントローラーは以下です。

UserDAO userDAO = new UserDAO(); // instantiate DAO class to access dummy database

        String userName = request.getParameter( "userName" ); // get userName String from the Login.jsp
        String password = request.getParameter( "password" ); // get password String from the Login.jsp

        if( userDAO.authenticate( userName, password ) ) // validate userName and password
        {

            UserModel userModel = userDAO.getUserDetails( userName ); // get userModel that correspond to userName parameter

            request.getSession().setAttribute( "userName", userName ); // set SESSION REQUEST to be forward to MainPage.jsp
            request.setAttribute( "userDetails", userModel ); // set REQUEST to be forward to MainPage.jsp

            RequestDispatcher rd = request.getRequestDispatcher( "MainPage.jsp" );
            rd.forward( request, response ); // forward request to MainPage.jsp
            return;
        }
        else
        {
            response.sendRedirect( "Login.jsp" );
            return;
        }
4

1 に答える 1

0

JSON は、javascript オブジェクトがフォーマットされるデータ構造です。jQuery を使用している場合、ajax 経由でリクエストを送信する正しい方法は、この場合 $.ajax 関数または $.post 関数のいずれかを使用することです。

$('input[type="submit"]').click(function(e){
    e.preventDefault();
    var action_script = $(this).closest('form').prop('action');
    $.post(action_script, {userName : $(this).closest('form').find('input[name="userName"]'), password: $(this).closest('form').find('input[name="password"]')}, function(returned_data){
        //this part executes once the server returns a successful response
    });
});

これにより、ハンドラーが送信ボタンのクリック イベントにバインドされ、通常の投稿が停止され、ページが更新されます。$.post() は、データの userName とパスワードをサーバーに送信し、応答が返されたときに成功のコールバックを実行します。

{userName : $(this).closest('form').find('input[name="userName"], password: $(this).closest('form').find('input[name="password"]')}JSONの例です。これは、userName と password の 2 つの属性を持つ単純な JSON オブジェクトです。これはキーと値のペアのセットであり、連想配列のように扱うことができます。

AJAX リクエストが行われると、レスポンスはページの再レンダリングを強制しないため、結果のデータを のコールバック メソッドで処理する必要があります。$.post()

jQuery での .ajax メソッドの仕組みの詳細については、http: //api.jquery.com/jQuery.ajax/ を参照してください。

于 2013-08-24T09:09:13.563 に答える