jQuery getJSON方法没有反应

Question

我想在我的网页上创建一个登录动作，它应该调用一个servlet来传递它所需的参数，并返回一个JSON对象给浏览器。我正在使用jQuery的$ .getJSON（）方法来实现此目的。

这里是形式 -

<form class="form" method="post" id="loginFrm" name="loginFrm"> 
    <div class="form-group"> 
     <label for="username">Email</label> 
      <input name="email" id="email" type="text" placeholder="Email" style="color: black;"> 
           </div> 
     <div class="form-group"> 
      <label for="password">Password</label> 
      <input name="password" id="password" type="password" placeholder="Password" style="color: black;"><br> 
     <span class="text-danger" id="error-box"></span> 
    </div> 
     <button id="btnLogin" class="btn btn-primary" style="margin-top: 17px;">Login</button> 
</form> 

这里是在点击后的登录按钮 -

// Add an onlick handler to the login button 
$('#btnLogin').on('click', loginAction); 


function loginAction() { 
var userEmail = $('#email').val(); 
var userPassword = $('#password').val(); 

if (userEmail == "") { 
    $('#error-box').html("Please enter your email"); 
    $('#email').focus(); 
    return false; 
} 

if (userPassword == "") { 
    $('#error-box').html("Please enter your password"); 
    $('#password').focus(); 
    return false; 
} 

var credentials = $('#loginFrm').serialize(); 
// alert(credentials); 

var url = "/login?" + credentials; 

$.getJSON(url, function (data) { 
    alert("Inside getJSON callback method"); 
    alert(data); 
}); 
} 

还执行JavaScript代码为我登录的HTML，这里是从LoginServlet代码。 该servlet映射到URL图案 - /登录

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    logger.info("Inside LoginServlet"); 

    response.setContentType("application/json"); 

    String email = request.getParameter("email") == null ? "" : request.getParameter("email"); 
    String password = request.getParameter("password") == null ? "" : request.getParameter("password"); 

    logger.info("email:: " + email + " password::" + password); 

    Customer customer = null; 
    Developer developer = null; 

    JsonObjectBuilder objBuilder = Json.createObjectBuilder(); 
    JsonObject responseObject = null; 

    PrintWriter pout = response.getWriter(); 

    if (!email.equals("") && !password.equals("")) { 
     boolean loginSuccess = false; 
     logger.info("Trying to load customer entity"); 
     customer = ofy().load().key(Key.create(Customer.class, email)).now(); 

     if (null == customer) { 
      logger.info("customer entity not found. Trying to load developer entity"); 
      developer = ofy().load().key(Key.create(Developer.class, email)).now(); 

      if (developer != null) { 
       logger.info("developer entity found"); 
       if (developer.getPassword().equals(password)) { 
        logger.info("Developer login successful"); 
        loginSuccess = true; 

        responseObject = objBuilder.add("status", "success").add("userType", "developer").add("forwardUrl", "Home.jsp").build(); 

        logger.info("JsonObject constructed as:: " + responseObject); 
        pout.println(responseObject.toString()); 
        pout.flush(); 

        // request.getRequestDispatcher("Home.jsp").forward(request, response); 
       } 
      } 
     } else { 
      if (customer.getPassword().equals(password)) { 
       logger.info("Customer login successful"); 
       loginSuccess = true; 

       responseObject = objBuilder.add("status", "success").add("userType", "customer").add("forwardUrl", "Home.jsp").build(); 

       logger.info("JsonObject constructed as:: " + responseObject); 
       pout.println(responseObject.toString()); 
       pout.flush(); 

       // request.getRequestDispatcher("Home.jsp").forward(request, response); 
      } 
     } 

     if (!loginSuccess) { 
      // Login Failure 
      responseObject = objBuilder.add("status", "faliure").build(); 
      logger.info("Login Faliure. JsonObject constructed as:: " + responseObject); 

      pout.println(responseObject.toString()); 
      pout.flush(); 
     } 

    } 
} 

我的问题是，在Servlet似乎并没有被返回的getJSON响应（）。 Firefox的网络选项卡不显示来自请求的任何响应。 它甚至不打印请求的HTTP状态码。

不过，我知道该请求到达LoginServlet，从下面的日志 -

[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doGet 
[INFO] INFO: Request inside doGet method. Calling doPost with it 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: Inside LoginServlet 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: email:: prateekmathur1991@gmail.com password::prateek 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: Trying to load customer entity 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: customer entity not found. Trying to load developer entity 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: developer entity found 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: Developer login successful 
[INFO] Jul 20, 2015 10:42:13 PM com.allissues.logic.LoginServlet doPost 
[INFO] INFO: JsonObject constructed as:: {"status":"success","userType":"developer","forwardUrl":"Home.jsp"} 

是明显的，但是从AJAX请求的响应是空的，我有麻烦了解哪里我的代码出错了。

任何人都可以帮助我吗？提前致谢。

编辑 此外，当我从网络访问此网址页面级 http://localhost:8080/login?email=prateekmathur1991@gmail.com&password=prateek

它给了我正确的JSONObject我expecting- {“地位”：“成功”，“用户类型”： “developer”，“forwardUrl”：“Home.jsp”}

Answer 1

这里有很多问题。

1. 这是一个非常糟糕的主意，使用GET来传递登录凭据。通常将URL缓存在浏览器，服务器日志和其他易于阅读的纯文本区域中。使用POST传递证书，确保他们通过SSL

2. 决不登录凭据传递（你只可以这样进行调试，这是很自然的，但它是一个非常不好的做法，进入）

3. 您的servlet已连线以使用doPost()进行响应，但您使用的是AJAX GET来传递数据。根据您的日志，看起来您可能会从doGet内部委托给doPost，但这仍然不是一个好习惯 - 只需从一开始就使用POST。

4. 您正在使用button元素触发您的登录操作，但未指定type属性或禁止默认的点击行为。默认情况下，button元素充当submit按钮，这意味着用户单击该按钮将首先触发AJAX行为，然后触发本机表单提交行为（即，通过POST将#loginFrm中包含的数据提交到当前加载的URL ）。由于默认情况下会重新加载页面，所以AJAX回调将不会按预期启动。

要修复，做两件事情：

1）清理你的安全

A.使用POST而不是GET。 jQuery将采取解析JSON对您的护理：

$.post("/login", credentials, function (data) { 
    alert("Inside getJSON callback method"); 
    alert(data); 
}); 

B.从日志中删除敏感数据。还记得删除将敏感用户数据转储到日志的服务器端日志记录语句。

C.不响应来自您的登录servlet的GET请求。您的doGet() servlet方法应返回404，不记录任何敏感数据，也不尝试对该数据采取任何操作。

2）禁止默认操作

你想jQuery的方法主体中的preventDefault()方法。不要忘了添加一个表单提交处理程序，以防止默认的表单提交行为，并委托你的方法：

$('#btnLogin').on('click', loginAction); 
$('#loginFrm').on('submit', loginAction); 

function loginAction(eventObject) { 
    eventObject.preventDefault(); 
    var userEmail = $('#email').val(); 
    ...