2013-08-26 83 views
0

我需要將li1和li2讀取的值發送給驗證用戶的servlet(無數據庫調用),並且servlet使用true或false響應。此布爾值必須在我的.js文件中讀取值,並且只有在無效的用戶的情況下重新加載整個頁面時,才必須更改DOM結構並使用適當的消息。從.js文件中讀取servlet的值並更改DOM結構

我logintom.js如下

goog.require('goog.dom'); 
goog.require('goog.events.EventType'); 
goog.require('goog.style'); 
goog.require('goog.ui.Control'); 
goog.require('goog.ui.Button'); 
goog.require('goog.ui.FlatButtonRenderer'); 
goog.require('goog.ui.LabelInput'); 
goog.require("goog.net.XhrIo"); 
goog.require("goog.structs.Map"); 
goog.require("goog.Uri.QueryData"); 
function setUp() { 
    var li1 = new goog.ui.LabelInput('USER NAME'); 
     li1.render(goog.dom.getElement('d1')); 
    var li2 = new goog.ui.LabelInput('PASSWORD'); 
     li2.render(goog.dom.getElement('d2'));  
      var val1; 
      var val2; 
    var fb1 = new goog.ui.Button('Login',goog.ui.FlatButtonRenderer.getInstance()); 
fb1.render(goog.dom.getElement('fb1')); 
     goog.events.listen(fb1,goog.ui.Component.EventType.ACTION, 
     function(e) { 
      val1 = li1.getValue(); 
      val2 = li2.getValue(); 
var request = new goog.net.XhrIo(); 
     goog.events.listen(request, "complete", function(){ 
     if (request.isSuccess()) 
     { 
    console.log("Satus code: ", request.getStatus(), " - ", request.getStatusText()); 
     } 
     else { 
    console.log("Something went wrong in the ajax call. Error code: ", request.getLastErrorCode()," - message: ", request.getLastError()); 
     } 
    }); 
     var param = 'username='+val1+'&password='+val2; 
     var url = 'loginprocessortom?username='+val1+'&password='+val2; 
     request.send(url, "POST"); 
});    
} 

我的servlet如下:

public class loginprocessortom extends HttpServlet 
{ 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws 
      ServletException, IOException 
    { 
     String uname = (req.getParameter("username")); 
     String pword = (req.getParameter("password")); 
      resp.setContentType("text/html"); 
      PrintWriter out = resp.getWriter(); 
    if (uname == "xyz" && pword == "xyz") 
      { 
        tof = true; 
      } 
      else 
      { 
      tof = false; 
      } 
    } 
} 

我的HTML如下。

<html> 
    <head> 
    <script src="closure-library/closure/goog/base.js"></script> 
    <script src="logintom.js"></script> 
    </head> 
    <body onload="setUp();"> 
     <fieldset> 
      <legend> 
       <strong>Authentication</strong> 
      </legend> 
      <div id="d1">User Name &nbsp </div> 
      <br> 
      <div id="d2">Password &nbsp &nbsp 
      </div> 
      <br> 
      <div id="fb1"></div> 
      <br> 
      <span id="sp1"></span> 
     </fieldset> 
</body> 
</html> 

我需要這個「TOF」發送到我的.js文件,我可以根據「TOF」的值,使用封閉閱讀和修改頁面無需重新加載整個頁面(阿賈克斯行爲)

回答

0
goog.events.listen(request, "complete", function(e){ 
     var xhr = /** @type {goog.net.XhrIo} */ (e.target); 
     res = xhr.getResponseText(); 
       if(xhr.getResponseText() == "true") 
       { 
       goog.dom.getElement("sp1").innerHTML = ("Hi Welcome"); 
       } 
       else 
       { 
       goog.dom.getElement("sp1").innerHTML = ("Invalid Username or Password"); 
       } 
     }); 

用上面的代碼替換控制檯日誌功能應該可以工作。