前端之家收集整理的这篇文章主要介绍了
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>
