Question

我有以下要求

- 登录btn并忘记密码btn
如果登录btn点击，
用户名和pswd文本字段验证应该完成。
如果验证成功 - 请调用LoginServlet
如果LoginServlet成功验证用户 - ＆gt;调用另一个DashboardServlet
如果LoginServlet验证用户失败 - ＆gt;返回失败消息到login.html页面和login.html页面应显示警告或消息。
什么工作？ - 空文本框验证工作，我可以找到哪个btn被点击登录或忘记了密码。
我没有使用jsp页面，所以请建议使用html的解决方案。

我很难找到过去3天的解决方案，我已经审核了SO和其他门户网站的帮助，但仍然缺乏最终输出

的login.html

<script>
function validateloginform() {
var name = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (name == null || name == "") {
    alert("Please enter valid userName");
    return false;
} else if (password.length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
}else
    {return true;
    }
}
$(document).ready(function(){
    // Set a variable, we will fill later.
    var value = null;

// On submit click, set the value
$('input[type="submit"]').click(function(){
    value = $(this).val();
});

// Use the set value in the submit function
$('form').submit(function (event)
{
    event.preventDefault();
    //alert(value);
    if(value == "LOGIN")
        {
        if (validateloginform()){
            alert('i want to call LoginServlet here');
        }
    else if (value == "FORGOT PASSWORD")
        window.location.href = "ChangePassword.html"

});});//ready function
</script>

</head>
 <body background="../Images/zebra_background.jpg">
        <p id="header"> ZMC Server</p>
        <div class="combine">
        <img class="logo" src="../Images/zebra_logo.png"><br>
        <text>Welcome To</text>
        <text1>Admin Console Login Page </text1>
   <!-- onsubmit="return validateloginform();" -->
    <form action="/zmcwebadmin/loginServlet" method="post" 
         id="loginForm" name="loginform"> <!-- </form> -->

        <div class="usernameformat">
            <input type="text" name="username" class="userformat" id="username"
                placeholder="User Name"> <br> <input type="password"
                name="password" id="password" class="passformat" placeholder="Password">
        </div>

        <p class="rememberme">
            Remember me <img id="remember_me" onclick="changeRememberImage()"
                src="../Images/remember_me_off.png" width="28" height="20"
                style="float: right">
        </p><br>

        <input type="submit" class="buttonformat" value="LOGIN" id="btnlogin" name="btnlogin">

         <input
            type="submit" class="buttonformat" value="FORGOT PASSWORD" id="btnforgetpwd" name="btnforgetpwd">
    </form>

LoginServlet

/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public LoginServlet() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("I am in doGet of LoginServlet");
    response.sendRedirect("/html/Loginpage.html");
}
/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("I am in doPost of LoginServlet");
    String userName = request.getParameter("username");
    String passWord = request.getParameter("password");

    if(LoginDao.validate(userName, passWord))
    {
        HttpSession session=request.getSession();  
        if(session.isNew())
           {
            //New session creation
              session=request.getSession(true);
           }
            else
            {
               session = request.getSession(false);
            }

         //setting attribute on session
         session.setAttribute("userName",userName);
         //send request to Welcome.jsp page
         //response.sendRedirect("/Dashboard.html");
         response.sendRedirect("/zmcwebadmin/dashBoardServlet");
         response.getWriter().write(String.valueOf(userName));
         System.out.println("I have connected to DB");
    }

    else
    {
        //response.sendRedirect("error.html");
        String data = "User name and password do not match";
        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(data);
        /*RequestDispatcher rd = request.getRequestDispatcher("Loginpage.html"); -- This solution works
        rd.forward(request, response);*/
        //response.sendRedirect("Loginpage.html");

        request.setAttribute("error", "Unknown login, try again");
        doGet(request, response);

        System.out.println("I have not connected to server");
    }
 }
}

Answer 1

根据你的陈述，我会假设步骤1-3正在运行，你实际上要求帮助的是第4步。在这种情况下，你正在寻找的似乎是对servlet的ajax请求，某些东西像

$.ajax({
  method: "POST",
  url: "/loginServlet",
  data: { username: "username", password: "password" }
})
.success(function(){
  //do success stuff
})
.error(function(){
  //do error handling stuff
});

如果用户验证成功，您可以使用类似

之类的内容重定向servlet

response.sendRedirect(targetUrl);

对于您的开发来说，阅读jQuery.ajax函数可能会有所帮助。很高兴知道。

http://api.jquery.com/jquery.ajax/

另外，如果你想取消提交行为，可能最好使用click而不是submit，即将按钮类型更改为按钮而不是提交，并添加onclick到按钮标记或通过jQuery。

Answer 2

您只需在表单验证后添加此方法

 function sendForm() {
  var isUserValid =false;
  var name = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  var formData = new FormData();
  formData.append('username', name);
  formData.append('password', password);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/zmcwebadmin/loginServlet', true);
  xhr.onload = function(e) { 

        if(this.data == name){
          isUserValid =true;
           window.location.replace("http://myapp/DashboardServlet");
         }else{
          isUserValid =false;
           alert("User name and password do not match");
         }
      };

  xhr.send(formData);
 }

要添加额外的安全层，您可以参考this。

用jquery调用Servlet

2 个答案: