Java web 用户注册界面(Ajax)

最新推荐文章于 2024-05-10 23:14:36 发布

梁梁梁振宇

最新推荐文章于 2024-05-10 23:14:36 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_40307529/article/details/83094586

版权

实验内容及步骤

开发一个用户注册界面，要求：用户名基于 Ajax 检测是否重复，年龄需用 JavaScript 检查格式是否正确

代码如下：

FORM.jsp(jsp页面)

<%@ page language="java" contentType="text/html; charset=gb2312"%>
<html>
<head>
<title>表单验证</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script type="text/javascript">
//声明XMLHttpRequest对象
var xmlHttpRequest = null;
//创建XMLHttpRequest对象实例的方法
function createXHR(){
	try{
		xmlHttp_request = new XMLHttpRequest();
		 alert("创建成功");
	}catch(e){
		var _msxmlhttp = new Array("Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0",
				                   "Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0",
                                   "Msxml2.XMLHTTP","Microsoft.XMLHTTP");
		for(var i = 0; i < _msxmlhttp.length; i++){
			try{
				xmlHttp_request = new ActiveXObject(_msxmlhttp[i]);
				if(xmlHttp_request != null){
					break;
				}
			}catch(e){}
		}
	}
	if(xmlHttp_request == null){
		alert("不能创建Ajax对象！");
	}
}
//发送客户端的请求，该方法有4个参数，其中method取值为POST或GET
function sendRequest(url,params,method,handler){
	createXHR();
	if(!xmlHttp_request)
		return false;
	xmlHttp_request.onreadystatechange = handler;  //制定响应函数为handler
	if(method == "GET"){
		xmlHttp_request.open(method,url+'?'+params,true);
		xmlHttp_request.send(null);
	}
	if(method == "POST"){
		xmlHttp_request.open(method,url,true);
		xmlHttp_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp_request.send(params);
	}
}
</script>
<script type="text/javascript">
function formcheck(){
	var url="formcheck";
	var params="userid="+userid.value;
	sendRequest(url,params,'POST',showresult);
}
function showresult(){
	if(xmlHttp_request.readyState == 4){
		if(xmlHttp_request.status == 200){
			var info = xmlHttp_request.responseText;
			 result.innerHTML = info;
		}
	}
}
function checkold(form){
	with(form){
		if(old.value == ""){
			alert("年龄不能为空");
			return false;
		}
		return true;
	}
}
</script>
</head>
<body>
请输入用户名：<input type="text" name="userid"/><input type="button" value="检查用户名" onclick="formcheck()"/>
<form action="" method="post" onsubmit="return checkold(this);">
<p> 请输入年龄   ：<input type="text" name="old"/></p>
<input type="submit" value="注册"/>
<div id="result"></div>
</form>
</body>
</html>

Formcheck.java(检测的servlet)

package servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;

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

public class FormCheck extends HttpServlet {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=GB18030");
		PrintWriter out = response.getWriter();
		request.setCharacterEncoding("GB18030");
		//String[] userList={"1","2","3","4"};
		String userid = request.getParameter("userid");
		//Arrays.sort(userList);									//对数组排序	
		//int result=Arrays.binarySearch(userList,userid);				//搜索数组
		if("2".equals(userid)){
			out.println("很抱歉，该用户名已经被注册！");			//输出检测结果
		}
		else {
			out.println("恭喜您，该用户名没有被注册！");
		}
	}
}

web.xml（配置文件）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<servlet>
<servlet-name>formcheck</servlet-name>
<servlet-class>servlets.FormCheck</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>formcheck</servlet-name>
<url-pattern>/formcheck</url-pattern>
</servlet-mapping>
</web-app>

如有错误请指出。

经运行无误。

梁梁梁振宇

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Java web 用户注册界面(Ajax)

实验内容及步骤开发一个用户注册界面，要求：用户名基于 Ajax 检测是否重复，年龄需用 JavaScript 检查格式是否正确代码如下：FORM.jsp(jsp页面)&lt;%@ page language="java" contentType="text/html; charset=gb2312"%&gt;&lt;html&gt;&lt;head&gt;&lt;titl...
复制链接

扫一扫