无法使用ajax开发登录页面

Question

我一直在尝试使用ajax和servlet开发登录页面。但是我还没有成功创建一个。结果总是与我预期的不同。我什至尝试引用以前成功的文件，但仍然失败。

这些是我的代码：

1. index.html

 <form id="loginFrm">
                <div class="imgcontainer">
                    <img src="img_avatar2.png" alt="Avatar" class="avatar">
                </div>

                <div class="container">

                    <input type="radio" value="Urusetia" name="loginRole">Urusetia<br>
                    <input type="radio" value="Penyelaras PITA" name="loginRole">Penyelaras PITA<br>
                    <input type="radio" value="Penyelia" name="loginRole">Penyelia<br>
                    <input type="radio" value="Penilai" name="loginRole">Penilai<br>
                    <input type="radio" value="Pelajar" name="loginRole">Pelajar<br>

                    <label for="uname"><b>Username</b></label>
                    <input type="text" placeholder="Enter Username" id="username" required>

                    <label for="psw"><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" id="password" required>

                    <button type="submit">Login</button>
                    <label>
                        <input type="checkbox" checked="checked" name="remember"> Remember me
                    </label>
                </div>

                <div class="container" style="background-color:#f1f1f1">
                    <button type="button" class="cancelbtn">Cancel</button>
                    <span class="psw">Forgot <a href="#">password?</a></span>
                </div>
            </form>

2. index.js

$(function(){
$("#loginFrm").submit(function(e){
        e.preventDefault();
        e.stopPropagation();
        var username = $("#username").val();
        var password = $("#password").val();



        var datalist = "username="+username+"&password="+password;


        $.ajax({
           type:"post", 
           url:"LogMasuk",
           data:datalist,
           cache: false,
           success: function(mydata){

               var myData = JSON.parse(mydata);
               if(myData.status === 1){
                   alert("Success");
                   sessionStorage.token = username;
                   location.href = "dashboard.html";
               }else if(myData.status === 0){
                   alert("User not found.");
               }
           },
           error: function(){
               console.log("AJAX error.");
           }
        });
    });
});

3. LogMasuk.java

public class LogMasuk extends HttpServlet {
 protected void processRequest(HttpServletRequest request, HttpServletResponse response)
         throws ServletException, IOException {

     JSONObject jo = new JSONObject();
     response.setContentType("text/html;charset=UTF-8");
     PrintWriter out = response.getWriter();
     try {
         /* TODO output your page here. You may use following sample code. */
         String username = request.getParameter("username");
         String password = request.getParameter("password");

         jo = dbAPI.LogMasuk(username, password);

     } finally {
         out.print(jo);
         out.close();
     }
 }

和引用数据库的文件

public static JSONObject LogMasuk(String username, String password){
        JSONObject jo = new JSONObject();
        boolean exist = false;

        try{
            con = conMan.getConnection();
            String sql = "SELECT * FROM pelajar WHERE username=? AND password=?";
            PreparedStatement ps = con.prepareStatement(sql);
            ps.setString(1, username);
            ps.setString(2, password);
            rs = ps.executeQuery();

            while(rs.next()){
                exist = true;
            }
            if(exist){
                jo.put("status", 1);
            }
            else
                jo.put("status", 0);
        }
        catch(SQLException e){
            jo.put("status", -1);
        }
        return jo;

每次我总是在网络标签下的浏览器控制台中都点击{}响应，即使状态代码正常。

提前感谢。

Answer 1

您的问题是由错误的异常处理引起的。

您的代码引发了一个异常，很可能是JDBC驱动程序上的一个ClassNotFoundException，但是您基本上是通过强制finally块中的响应主体关闭来完全抑制它。

try {
    // ...
} finally {
    out.print(jo);
    out.close(); // BAD! Remove this line!
}

这样，您基本上可以防止服务器显示其默认错误响应，该响应通常包含堆栈跟踪，从而有效地解决了您的实际问题。

更好的是，不要像servlet那样处理异常。完全删除try-finally块。

// ...
out.print(jo);

如果有的话，应该在ServletException块中将所有检查的异常作为catch抛出。

try {
    // ...
    out.print(jo);
} catch (SomeCheckedException e) {
    throw new ServletException(e);
}

这样服务器将能够正确处理它，并且您可以在web.xml中配置错误响应正文。

另请参见：

• Submitting form to Servlet which interacts with database results in blank page
• How should I connect to JDBC database / datasource in a servlet based application?
• How to install JDBC driver in Eclipse web project without facing java.lang.ClassNotFoundexception

Answer 2

您应该使用flush来返回json对象，如下例：

PrintWriter out = response.getWriter();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
out.print(employeeJsonString);
out.flush();