javascript - jQuery getJSON 方法无响应

Question

我正在尝试在我的网页上创建一个登录操作，它应该调用一个 servlet 将所需的参数传递给它，并向浏览器返回一个 JSON 对象。为此，我正在使用 jQuery 中的 $.getJSON() 方法。

这是我的登录表单的 HTML-

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

这是在点击登录按钮时执行的 JavaScript 代码-

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

此外，这是来自 LoginServlet 的代码。 Servlet 映射到 URL 模式 -/login

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 请求的响应是空的，我很难理解我的代码哪里出错了。

有人可以帮我解决这个问题吗？提前致谢。

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

它给了我期望的正确 JSONObject- {"status":"success","userType":"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 行为，然后触发原生表单提交行为(即，将#loginFrm中包含的数据通过POST提交到当前加载的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() 方法。不要忘记还添加一个表单提交处理程序以防止默认表单提交行为并委托(delegate)给您的 loginAction 方法:

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

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