JavaWeb关于AJAX的使用

关于AJAX的使用

最近做了一个用人脸识别进行登录注册的Javaweb项目，其中用到了用AJAX进行登录识别的问题，源码如下

人脸识别的后端源码

   package com.rain.servlet;

   import java.io.FileOutputStream;
   import java.io.IOException;
   import java.io.OutputStream;
   import java.io.PrintWriter;
   import java.util.Arrays;
   import java.util.Base64;
   import java.util.HashMap;

   import javax.servlet.ServletException;
   import javax.servlet.http.HttpServlet;
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   import javax.servlet.http.HttpSession;
   import org.json.JSONObject;

   import java.util.Base64.Decoder;

   import com.baidu.aip.face.AipFace;
   import com.rain.bean.AdminBean;
   import com.rain.dao.AdminDao;
   public class FaceServlet extends HttpServlet {


/**
 * 
 */
private static final long serialVersionUID = 1L;
/**
 * (非 Javadoc)
* <p>Description(描述):get方法，主要调用post </p>
* <p>Title: doGet</p>
* @param request
* @param response
* @throws ServletException
* @throws IOException
* @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
 */
public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		doPost(request, response);
}

/**
 * (非 Javadoc)
* <p>Description(描述):post方法，主要进行业务操作 </p>
* <p>Title: doPost</p>
* @param request
* @param response
* @throws ServletException
* @throws IOException
* @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
 */
public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

	//防止乱码
	response.setContentType("text/html;charset=utf-8");
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	
	
	String img=request.getParameter("img");			//图像数据
	String username = request.getParameter("username");	
	String name=request.getParameter("name");
	String password=request.getParameter("password");//用户名
	String email = request.getParameter("email");
	String phone = request.getParameter("phone");
	String status=request.getParameter("status");
	String 	tag	= request.getParameter("tag");
	//System.out.println(status);
	String APP_ID = "11199968";
    String API_KEY = "s38ErHUzrxr915bt6lYGlv8V";
    String SECRET_KEY = "BQsbuqDgaIcdIzCceg3fwUTDEcrFFWWR";
    AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
	if(tag.equals("reg")){
		//注册
		face(username, img,name,password,email,phone, response,request,client);
	}else if(tag.endsWith("login")){
		//登陆
		login(status,img,response,username,password,request,client);
	}
	
}
    public void face(String username ,String img,String name,String password,String email,String phone,HttpServletResponse response,HttpServletRequest request,AipFace client) {
	AdminBean adm = new AdminBean();
	//IUserService userService = new UserServiceImpl();
	// 图片名称 
	// 往数据库里面插入注册信息
	String fileName = System.currentTimeMillis() + ".png";		
	String basePath = request.getSession().getServletContext().getRealPath("picture/");
	//String username1 = request.getParameter("username");
	//String password = request.getParameter("password");
	//String name = request.getParameter("name");
	//String email = request.getParameter("email");
	//String phone = request.getParameter("phone");
	int lend_num = 30;
	int max_num = 5;
	AdminDao userdao = new AdminDao();
	//将注册信息存入数据库，再返回登录
	userdao.Register(username,name,password,email,phone,lend_num,max_num);
	// 往服务器里面上传图片
	GenerateImage(img, basePath+ "/" + fileName);
	// 给人脸库中加入一个脸
	boolean flag = facesetAddUser(client, basePath + "/" + fileName,
			username);
	try {
		PrintWriter out = response.getWriter();
		// 中文乱码，写个英文比较专业 哈哈

		if (flag == false) {
			out.print("请把脸放上!!");//请把两脸放上
		} else {
			out.print("注册成功!!");  //注册成功
			//response.sendRedirect("/books/login.jsp");
		}
	} catch (IOException e) {
		// TODO 异常执行块！
		e.printStackTrace();
	}
}


/**
 * 
* @Title: login
* @Description: 该方法的主要作用：登陆
* 实现原理：
* 1.从前台接收用户名
* 2.然后把从前台传过来的图片先上传到服务器
* 3.把上传的这张人脸与人脸库中的人脸对应
* @param  设定文件  
* @return  返回类型：String   
* @throws
 */
public void login(String status,String img,HttpServletResponse response,String username,String password,HttpServletRequest request,AipFace client) {
	// 图片名称
	String fileName = System.currentTimeMillis() + ".png";
	String basePath = request.getSession().getServletContext()
			.getRealPath("picture/");
	// 往服务器里面上传图片
	GenerateImage(img, basePath + "/" + fileName);
	response.setContentType("text/html,charset=utf-8;");
	AdminBean adminbean = new AdminBean();
	AdminDao admindao = new AdminDao();
	try {
		PrintWriter out = response.getWriter();
		//String result1 = admindao.Login_verify(status);
		HttpSession session = request.getSession();
		Double result = verifyUser(client, basePath + "/" + fileName,username);
	
		if (result > 90) {
			adminbean = admindao.getAdminInfo(username);
			session.setAttribute("aid", ""+adminbean.getAid());
			//设置session的失效时间
			session.setMaxInactiveInterval(6000);
			// 匹配成功
			int n = Integer.parseInt(adminbean.getStatus());
			
			if(n==1){
				out.print("1");
				//out.flush();
				//out.close();
	     	//response.sendRedirect("index2.jsp;
				//return;
     //
			   }else if(n==2){
				out.print("2");
				//out.flush();
				//out.close();
				//response.sendRedirect("admin.jsp");
				//return;
			}
		} else {
			
			out.print("3");
			//out.flush();
			//out.close();
		}
		
	} catch (IOException e) {
		// TODO 异常执行块！
		e.printStackTrace();
	}
}

servlet返回数据给ajax的时候用的是out.print
status的值定义的是管理员权限
out.print(“1”)对应index2.jsp
out.print(“2”)对应admin.jsp

人脸登录的源码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图书馆登录</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="static/assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="static/assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="欢迎使用图书馆系统" />
<link rel="stylesheet" href="static/assets/css/amazeui.min.css" />
<link rel="stylesheet" href="static/assets/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="static/assets/css/app.css">
<script src="static/assets/js/jquery.min.js"></script>
     <script src="static/assets/js/index.js"></script>
<script src="static/assets/js/jquery-1.8.3.js"></script>
<script src="static/assets/js/photobooth.js"></script>
<script type="text/javascript" charset="utf-8">


 		function CatchCode() {
      //实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途
      var canvans = document.getElementById("canvas");
      var video = document.getElementById("video");
      var context = canvas.getContext("2d");

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video,0,0);
      
      var imgData = canvans.toDataURL();
		//获取图像在前端截取22位以后的字符串作为图像数据
		var imgData1 = imgData.substring(22);
		//AdminBean adminbean = new AdminBean();
		var username = $("#username").val();
		var status=$("#status").val();
		//var password=$("#password").val();
		//var email=$("#email").val();
		//var phone=$("#phone").val();
		$.ajax({
				type: "post",
				url: "FaceServlet?tag=login",
				data: {"img":imgData1,"username":username,"status":"1"},
				success: function(data){
					//var status=$("#status").val();
					if(data==1){
						location.href="index2.jsp";
					}else if(data==2){
						location.href="admin.jsp";
					}else if(data==3){
						alert("检测到不是你的脸");
					}
					
					 //alert(data);
					
						//response.sendRedirect("index2.jsp");
						//out.println("登陆成功"); 
						
						//location.href="index2.jsp";
				}
			});
  }
   </script>
   </head>


  <body data-type="login">
  <div  class="am-form tpl-form-line-form">
  <script src="static/assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 风格切换 -->
    <div class="tpl-skiner">
        <div class="tpl-skiner-toggle am-icon-cog">
        </div>
        <div class="tpl-skiner-content">
            <div class="tpl-skiner-content-title">
                选择主题
            </div>
            <div class="tpl-skiner-content-bar">
                <span class="skiner-color skiner-white" data-color="theme-white"></span>
                <span class="skiner-color skiner-black" data-color="theme-black"></span>
            </div>
        </div>
    </div>
    <div class="tpl-login">
        <div class="tpl-login-content">
            <div class="tpl-login-logo">
            </div>
                <div class="am-form-group">
                    <input type="text" class="tpl-form-input" id="username" required="required"  name="username"placeholder="请输入账号">
                </div>
                <div class="am-form-group">
                    <video id="video" width="320px" height="200px" autoplay></video>
		            <canvas  style="" hidden="hidden" id="canvas"></canvas>
                </div>
                                          <div class="am-form-group">

                    <input type="submit" id="snap" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-warning" name="login" value="登录" >
                    <a href="/books/register.jsp"  class="am-btn am-btn-danger  am-btn-block tpl-btn-bg-color-success">注册</a>
                </div>

        </div>
    </div>
</div>
<script src="static/assets/js/amazeui.min.js"></script>
<script src="static/assets/js/app.js"></script>
</div>
</body>

</html>

调用了AJAX方法，响应了Servlet中的out.print()方法，实现了登录验证功能
通常情况下我们会通sendRedirect方法进行重定向而跳转页面，而此方法只需要判断Status的值，从而解决了页面跳转问题。