Read value from servlet in .js file and alter DOM structure

StackOverflow https://stackoverflow.com/questions/18447219

Question

I need to send the vaule read by li1 and li2 to a servlet which authenticates the user(no DB calls) and the servlet responds with a true or false.This boolean value must be read in my .js file and must alter only the DOM structure without reloading entire page in case of invalid user with appropriate message.

My logintom.js is as follows

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");
});             
}

My Servlet is as follows

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;
            }
   }
}

My HTML is as follows.

<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>

I need to send this "tof" to my .js where i can read it using closure and alter page based on the value of "tof" without reloading the entire page(Ajax behaviour)

Was it helpful?

Solution 

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");
                }
        });

Replacing the console log function with the above code should work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top