Jsp Ajax之模擬用戶註冊

時間 2021-08-15

標籤 javascript html java web jsp ide 函數 post this 欄目 JSP 简体版

原文原文鏈接

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'regUser.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript">
		var xhr;
		//建立Xhr對象的函數;
		function createXhr(){
			try{
				//普通方式;
				return new XMLHttpRequest();
			}catch(e){
				//異常，則另一種方式;
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		//用戶名，文本框失去焦點處理函數;
		function checkUser(){
			xhr=createXhr();
			//獲得文本框中輸入的內容；
			var username=document.getElementById("username").value;
			//設置回調函數;
			xhr.onreadystatechange=callback;
			//alert(username);
			//設置請求方式和url，由於是get方式，請求數據直接在url的後面;
			xhr.open("get","checkUserAction?username="+username);
			//發送請求;
			xhr.send(null);
		}
		function callback(){
			//判斷請求完成，而且成功返回;
			if(xhr.readyState==4&&xhr.status==200){
				var msg=document.getElementById("msg");
				var res=xhr.responseText;
				//alert(res);
				//根據響應返回的數據，進行頁面更新;
				if(res=="true"){
					msg.innerHTML='用戶名已經存在';
				}else{
					msg.innerHTML='用戶名能夠註冊';
				}
			}
		}
	</script>
  </head>
  
  <body>
	<form action="regAction" method="post">  
		帳戶：<input type='text' id='username' name='username' οnblur='checkUser()'/><span id='msg'></span><br/>
		密碼:<input type='password' name='userpwd'><br/>
		郵箱：<input type='text' name='email'><br/>
		地址:<input type='text' name='address'><br/>
		<input type='submit' value='註冊'/>
	</form>
  </body>
</html>

響應的Servlet代碼:javascript

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckUserServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out=resp.getWriter();
		//獲取提交數據;
		String username=req.getParameter("username");
		
		if("admin".equals(username)){
			out.print("true");
		}else{
			out.print("false");
		}
		out.close();
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doGet(req, resp);
	}
}