AJAX for Java Web Learning

What I bring you today is AJAX project analysis.
AJAX = Asynchronous JavaScript and XML.
The biggest advantage of AJAX is that it can exchange data with the server and update part of the web content without reloading the whole page.
Brief introduction of project content: what we are doing today is about using AJAX to make a match of user name before logging in.
Tools: IDEA2018.2.2, Tomcat 7.0.9, jdk 1.8.0, c3p0,jdbc.

I. open an IDEA first

1. First open an IDEA and create a Java Web project

2. Create two jsp pages

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login page</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>

    <div class="container text-center">
        <form class="form-signin" action="/loginServlet">
            <h2 class="form-signin-heading">Login page</h2>
            <input type="text" id="userName" name="userName" class="form-control" placeholder="User name" required autofocus>
            <input type="password"  id="password" name="password" class="form-control" placeholder="Password" required>
            <input type="button" οnclick="login()" value="Sign in" class="btn btn-lg btn-primary btn-block">
            <%--<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>--%>
        </form>
    </div>

</body>
<script>
    var  flag=true;
    $(function () {
        $("#userName").blur(function () {
            var userName=$("#userName").val();
            // alert(userName);
            $.post(
                "/userNameServlet",
                {"userName":userName},
                function(result) {
                    // alert(result)
                    if(result){
                        $("#userName").css("border","1px solid rgb(204, 204, 204)");
                        // alert(result)
                        flag=true
                    }else{
                        $("#userName").css("border","1px solid red");
                        // alert(result)
                        flag=false;
                    }
                },
                "json"
            )
        });
    });
    function login() {
        var userName=$("#userName").val();
        var password=$("#password").val();
        // alert(userName+"  "+password)
        if(flag){
            location.href="/loginServlet?userName="+userName+"&password="+password;
        }else{
            alert("user does not exist")
        }
    }
</script>
</html>

success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
  </head>
  <body>
//Welcome landing
  </body>
</html>

Prepare two servlet s

loginServlet

package com.zr.servlet;

import com.zr.bean.User;
import com.zr.service.UserService;
import com.zr.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        System.out.println("helloworld");
        HttpSession session=request.getSession();
//        //Get userName in login.jsp
        String userName=request.getParameter("userName");
        String password=request.getParameter("password");
//        System.out.println(userName+"helloworld"+password);
        User us=new User(userName,password);
         UserService su=new UserServiceImpl();
//         su.login(us);
        if(su.login(us)){
            session.setAttribute("flage",1);
            request.getRequestDispatcher("/success.jsp").forward(request,response);
        }else{
            request.getRequestDispatcher("/error.jsp").forward(request,response);
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

userNameServlet

package com.zr.servlet;

import com.zr.service.UserService;
import com.zr.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/userNameServlet")
public class userNameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userName = request.getParameter("userName");
        UserService us=new UserServiceImpl();
        boolean flag=us.selectUserName(userName);
        response.getWriter().write(flag+"");
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

Posted by joejoejoe on Tue, 22 Oct 2019 08:16:59 -0700

Programmer Group

AJAX for Java Web Learning

AJAX for Java Web Learning

I. open an IDEA first

2. Create two jsp pages

Prepare two servlet s

Hot Keywords