问题：

使用jquery调用Servlet

百里秋月

2023-03-14

我有以下要求

在Login.html页面-登录btn并忘记密码btn
如果登录btn点击，
应该完成用户名和pswd文本字段验证。
如果验证成功-调用LoginServlet
如果LoginServlet成功验证用户-

我正在努力寻找过去3天的解决方案，我已经推荐了SO和其他门户网站的帮助，但仍然缺乏最终输出

登录名。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");
    }
 }
}

共有2个答案

吴英武

2023-03-14

您好，请在表单验证后添加此方法

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

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

江宏伟

2023-03-14

根据您的陈述，我假设步骤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/

此外，如果您想取消提交行为，最好使用单击而不是提交，即将按钮类型更改为按钮而不是提交，并将onClick添加到按钮标记或通过jQuery。

类似资料：

使用jquery $ .ajax调用PHP函数

问题内容：这可能是一个简单的答案，但是我正在使用jQuery的$ .ajax调用PHP脚本。我要做的基本上是将PHP脚本放入函数中，然后从javascript调用PHP函数。对此我如何在javascript中调用该函数？现在，我只使用$ .ajax和列出的PHP文件。问题答案：使用调用服务器上下文（或URL，或其他）来调用特定的“动作”。您想要的是这样的：在服务器端，应读取POST参数
使用JQuery Ajax调用php函数

问题内容：首先，最感谢您解决我的问题，以及您可能提供的任何帮助！好的，就像标题所说的，我需要从索引页面调用php函数，该函数使用JQuery Ajax在数据库中添加新记录作为投票。此函数将返回一个整数，然后将其打印在调用它的表单按钮内。有人对我将如何实现这一目标有想法吗？任何指导表示赞赏！我猜是表单动作属性发布了吗？问题答案：是的，创建一个单独的PHP文件，该文件调用该函数并回显输出。
使用jquery / javascript调用angularjs函数

问题内容：我采取了相同的步骤，但是在浏览器控制台中出现错误我制造了小提琴。如何调用myfunction函数并显示警报？任何想法？问题答案：解决方案提供您所链接的问题是正确的。实现的问题是您没有正确指定元素的 ID 。其次，您需要使用事件来执行代码。当前未加载DOM，因此找不到元素，因此出现错误。的HTML JS代码演示
使用jQuery使用参数调用PHP函数

问题内容：我有一个php文件，其中定义了许多功能，比如：我想打电话给使用 AJAX 。谢谢您的帮助问题答案：您不能直接通过AJAX调用来调用PHP函数，但是您可以这样做： PHP： JS：
如何使用jQuery链接ajax调用

问题内容：我需要发出一系列N ajax请求而不锁定浏览器，并且想要使用jquery延迟对象来完成此操作。这是一个具有三个请求的简化示例，但是我的程序可能需要排队100个以上（请注意，这不是确切的用例，实际代码的确需要在执行下一个步骤之前确保步骤（N-1）的成功步）：这是写入控制台的内容（所有请求都是并行进行的，响应时间与预期的每个国家/地区的数据大小成正比：我怎样才能让延期的对象为我排队呢
在ASP.NET WebForms中使用jQuery调用“ WebMethod”

问题内容：我在下面设置了一个断点，但是我从未达到过断点。 CS： aspx：问题答案：确保在元素中启用了页面方法：并且您已经通过在onclick处理程序中返回false来取消了按钮的默认操作，否则页面将执行完整的回发，并且您的AJAX调用可能永远没有时间完成。这是一个完整的工作示例：另一种可能性是毫不客气地订阅点击处理程序：然后在一个单独的javascript文件中：您可能还会注意到

使用jquery调用Servlet

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档