簡單登錄的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

回答

相關問題