今天给大家带来的是AJAX的项目分析。 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 项目内容简介：今天做的是一个关于使用AJAX来做一个在登陆之前做一个用户姓名的匹配。 工具：IDEA2018.2.2、Tomcat 7.0.9、jdk 1.8.0 、c3p0,jdbc。
1、首先打开一个IDEA并且创建好一个Javaweb项目工程
login.jsp
<%@ 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>登录页面</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">登录页面</h2> <input type="text" id="userName" name="userName" class="form-control" placeholder="用户名" required autofocus> <input type="password" id="password" name="password" class="form-control" placeholder="密码" required> <input type="button" οnclick="login()" value="登录" class="btn btn-lg btn-primary btn-block"> <%--<button class="btn btn-lg btn-primary btn-block" type="submit">登录</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("用户不存在") } } </script> </html>success.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title></title> </head> <body> 欢迎登陆 </body> </html>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(); // //获取login.jsp中的userName 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); } }