jQuery getJSON方法没有响应

No Response from jQuery getJSON method

本文关键字:响应 方法 getJSON jQuery      更新时间:2023-09-26

我试图在我的网页上创建一个登录操作,这应该调用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/登录?电子邮件= prateekmathur1991@gmail.com&密码= prateek

它给了我正确的JSONObject我期待-{"状态":"成功","userType":"开发人员","forwardUrl":"Home.jsp"}

这里有很多问题。

  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)清理你的安全

。使用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()方法在你的方法体。不要忘记添加一个表单提交处理程序,以防止默认的表单提交行为,并委托给loginAction方法:

$('#btnLogin').on('click', loginAction);
$('#loginFrm').on('submit', loginAction);
function loginAction(eventObject)  {
    eventObject.preventDefault();
    var userEmail = $('#email').val();
    ...