AJAX异步刷新-----判断用户名是否可用,预览头像

<%@ 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 'Region.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">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/address.js"></script>
<script type="text/javascript" src="js/China.js"></script>
<script type="text/javascript">
	//如果两次密码 不相同那么就会返回false  如果false就不会提交

	function count() {
		var one = $("#onepas").val();
		var two = $("#twopas").val();
		var name = $("#username").val();
		var namefont = $("#namefont").val();
		if (name == "") {
			alert("用户名不能为空");
			return false;
		} else if (namefont == "用户名已存在") {
			alert("用户名已存在");
			return false;
		} else if (namefont == "用户名不能包含中文") {
			alert("用户名不能包含中文");
			return false;
		} else if (one == "" || two == "") {
			alert("密码或者确认密码不能为空");
			return false;
		} else if ($("#yzmtext").val() == "") {
			alert("验证码不能为空");
			return false;
		} else if ($("#yzmfont").text() == "验证码输入错误") {
			alert("验证码输入错误");
			return false;
		} else if (one == two) {
			$("#warning").html() = "";
			return true;
		} else {
			$("#warning").html("两次密码输入不一致");
			alert("两次密码输入不一致");
			return false;
		}

	}
	//动态判断用户名是否可用
	function nameChange() {
		//获取xmlhttprequest对象
		var xmlhttp = getXMLHttpRequest();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//做任意事情
				//获取到相应的内容
				var namefont = $("#namefont");
				var str = xmlhttp.responseText;
				if (str == 1) {
					namefont.css("color","red");
					namefont.html("用户名已存在");
				} else if (str == 2) {
					namefont.css("color","red");
					namefont.html("用户名不能包含中文");
				} else {
					namefont.css("color","green");
					namefont.html("用户名可用");
				}

			}
		};

		//定义访问的网址
		var url = "${pageContext.request.contextPath}/servlet/judgeUserNameServlet?username="
				+ $("#username").val();
		xmlhttp.open("get",url);
		//发送请求
		xmlhttp.send();

	}
	//刷新验证码
	var i = 0;
	function noSee() {
		$("#yzm").attr("src","${pageContext.request.contextPath}/servlet/YZM?id=" + i);
		//document.getElementById("yzm").src=
		i++;
	}
	//动态判断验证码是否正确
	function yzmChange() {
		//获取xmlhttprequest对象
		var xmlhttp = getXMLHttpRequest();

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

				var str = xmlhttp.responseText;
				//var msg=document.getElementById("yzmfont");
				if (str == 0) {
					$("#yzmfont").css("color","red");
					$("#yzmfont").html("验证码输入错误");
				} else {
					$("#yzmfont").css("color","green");
					$("#yzmfont").html("验证码正确");
				}

			}
		};

		//定义访问的网址
		var url = "${pageContext.request.contextPath}/servlet/JudgeCode?yzm="
				+ $("#yzmtext").val();

		xmlhttp.open("get",url);
		//发送请求
		xmlhttp.send();
	}
	//图片预览
	function fileChange() {
		//获取xmlhttp
		var xmlhttp = getXMLHttpRequest();
		//获取工程路径
		var conPath = "${pageContext.request.contextPath}";

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var str = xmlhttp.responseText;
				//alert(conPath+str);
				$("#icon").val(str);
				$("#img").attr("src",conPath + str);

			}
		};
		var file = document.getElementById("file");
		xmlhttp.open("post",file.action);
		xmlhttp.send(new FormData(file));
	}
	function adre() {
		$("#addressAll").val("");
	}
</script>

<script type="text/javascript">
	window.onload = function() {
		//默认省
		$("#provice").html(getProBegin());
		//显示默认的市
		$("#city").html(getCityBegin(0));
		//显示默认的区
		$("#area").html(getAreaBegin(0,0));
	}
	//当省改变时   自动改变该省的市
	function changePro() {
		//当前的省的value
		var proValue = $("#provice").val();
		//获取返回的更新后的市，区列表
		var html = onProChange(proValue);
		$("#city").html(html[0]);
		$("#area").html(html[1]);
	}
	//当市改变时  区自动变为该市的区
	function changeCity() {
		//获取当前的市的value
		var cityValue = $("#city").val();
		$("#area").html(onCityChange(cityValue));

	}
</script>
<style type="text/css">
#ns {
	position: relative;
	top: 500px;
	left: 520px;
}

#yzm {
	position: absolute;
	top: 380px;
	left: 260px;
}

#ns {
	position: absolute;
	top: 430px;
	left: 260px;
}

#regPage {
	position: absolute;
	top: 2px;
	left: 500px;
}

#attention {
	position: absolute;
	top: 60px;
	left: 240px;
}

#img {
	position: absolute;
	top: -200px;
	left: 400px;
}

#submit {
	position: relative;
	top: 70px;
}

#addresdiv {
	position: relative;
	top-10px;
}

#file {
	position: relative;
	top: -80px;
}

#yzmdiv {
	position: relative;
	top: 50px;
}

#addfont {
	position: relative;
	top: -60px;
}
</style>
</head>

<body>
	<h1 id="regPage" color="red">欢迎注册</h1>
	<br>
	<br>
	<br>
	<!--  <form action="${pageContext.request.contextPath }/servlet/RegionServlet" enctype="multipart/form-data" method="post" > -->
	<form
		action="${pageContext.request.contextPath }/servlet/RegionServlet"
		method="post">
		用户名：<input type="text" id="username" name="username"
			onchange="nameChange()" /> <font id="attention" color="red">用户名只能有数字，字母，下划线组成</font><br>
		<font id="namefont"></font><br> <br> 密码：<input
			type="password" id="onepas" name="password" /><br> <br>
		确认密码：<input type="password" id="twopas" name="repassword" /> <font
			id="warning" color="red"></font><br> <br> <input id="icon"
			type="hidden" name="icon" value="">
		<div id="addressdiv">
			选择省：<select id="provice" name="pro" onchange="changePro()"></select>
			选择市：<select id="city" name="city" onchange="changeCity()"></select>
			选择区：<select id="area" name="area"></select><br> <br> <font
				id="addfont"> 详细地址：</font>
			<textarea id="addressAll" name="addressAll" rows=5 cols=35
				onclick="adre()" onclick="">乡/镇/街道</textarea>
			<br> <br>
		</div>
		<div id="yzmdiv">
			验证码:<input type="text" id="yzmtext" name="yzm" onchange="yzmChange()" /><br>
			<font id="yzmfont"></font><br> <br>
		</div>
		<input type="submit" id="submit" value="提交" onclick="return count()" />
	</form>

	<form id="file"
		action="${pageContext.request.contextPath}/servlet/ImageFileServlet"
		enctype="multipart/form-data" method="post">
		头像:<input type="file" name="photo" onchange="fileChange()" /> <img
			id="img" width="300px" height="300px" src="img/moren.png">
	</form>


	<img id="yzm" onclick="noSee()"
		src="${pageContext.request.contextPath }/servlet/YZM">
	<font id="ns" onclick="noSee()" color="red">看不清楚点我</font>
	<br>
	<font color="green">登录请点击这里</font>
	<br>
	<button>
		<a href="${pageContext.request.contextPath}/Login.jsp">登录</a>
	</button>
</body>
</html>
原文链接：https://www.f2er.com/ajax/160778.html
AJAX异步刷新-----判断用户名是否可用,预览头像

猜你在找的Ajax相关文章
