简单登录的AJAX + JSON

我是AJAX和JSON的新手，我看过它的教程，但看起来该部门对我来说非常适合。
简单登录的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; 
     }

来源

2013-08-24 newbie

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的一个例子。这是一个带有两个属性userName和password的简单JSON对象。它是一组键值对，可以像关联数组一样处理。

当一个AJAX请求作出响应不会强制重新渲染页面的，所以你必须处理结果数据中的$.post()

http://api.jquery.com/jQuery.ajax/回调方法的详细信息，如何阿贾克斯方法在jQuery的作品

来源

2013-08-24 09:09:13 DGS

我可以问我需要什么，以及我将如何实现您发布的这段代码？ – newbie

如果你有jQuery的工作已经只是将这个代码包含在'$（document）.ready'处理程序中，它将用于发布。 – DGS

我没有'jQuery'，也不知道它。它看起来像'Javasript'？ – newbie

简单登录的AJAX + JSON

回答

相关问题