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

来源：互联网发布：雷锋源越狱软件编辑：程序博客网时间：2024/05/22 10:33
<%@ 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() {//获取xmlhttpvar 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() {//当前的省的valuevar proValue = $("#provice").val();//获取返回的更新后的市，区列表var html = onProChange(proValue);$("#city").html(html[0]);$("#area").html(html[1]);}//当市改变时  区自动变为该市的区function changeCity() {//获取当前的市的valuevar 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" > --><formaction="${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> 密码：<inputtype="password" id="onepas" name="password" /><br> <br>确认密码：<input type="password" id="twopas" name="repassword" /> <fontid="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> <fontid="addfont"> 详细地址：</font><textarea id="addressAll" name="addressAll" rows=5 cols=35onclick="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()" /> <imgid="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>
阅读全文
0 0