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(); 
    ...