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 : $(this).closest('form').find('input[name="userName"], password: $(this).closest('form').find('input[name="password"]')}是 JSON 的一个示例。这是一个简单的 JSON 对象，具有两个属性 userName 和 password。它是一组键值对，因此可以像关联数组一样对待。

发出 AJAX 请求时，响应不会强制重新呈现页面，因此您必须在$.post()

http://api.jquery.com/jQuery.ajax/有关 jQuery 中的 .ajax 方法如何工作的更多信息

于 2013-08-24T09:09:13.563 回答