Ajax异步刷新注册验证

最新推荐文章于 2021-08-05 12:27:43 发布

小小志秩

最新推荐文章于 2021-08-05 12:27:43 发布

阅读量161

点赞数

分类专栏：前端文章标签： ajax

本文链接：https://blog.csdn.net/z2014ypd/article/details/88423462

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#userName{border:1px solid lightgray;height: 25px;}
			#userName:focus{border:1px solid blue;}
		</style>
		<script type="text/javascript">
			function validate(obj) {
				//得到当前输入框的内容
				var userName = obj.value;
				//创建对象【绝大多数浏览器都支持XMLHttpRequest方式创建】
				var xhr = null;
				try{
					xhr = new XMLHttpRequest();
				}catch(e){
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				//初始化【GET和POST忽略大小写】这里地址后面可以传递请求参数 不论GET还是POST，如果是GET请求只能在这里传递参数
				xhr.open("POST", "/ojbk/valid.do?userName="+userName, true);
				//经过测试 火狐浏览器这句话可加可不加
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				//绑定事件 回调函数【onreadystatechange是全小写的】
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status==200){
						//接收后台响应过来的数据
						var res = xhr.responseText;
						if(res == "1"){
							//将接收到的数据展示到页面中
							document.getElementById("userName").style.border = "1px solid red";
							document.getElementById("msg").innerHTML = "<img src='imgs/xx.bmp'/>此用户名太受欢迎，请更换一下";
						}else if(res == "2"){
							//将接收到的数据展示到页面中
							document.getElementById("userName").style.border = "1px solid green";
							document.getElementById("msg").innerHTML = "<span style='color:green;'>可以注册</span>";
						}
					}
				}
				//发送请求【send方法的参数其实是发送POST请求的参数】
				xhr.send();
			}
		</script>
	</head>
	<body>
		用户名<input type="text" id="userName" name="userName" onblur="validate(this);">
		<span id="msg"></span>
	</body>
</html>

后端接受请求

package zz.practice.servlet;

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

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

import zz.practice.dao.IUserDao;
import zz.practice.dao.impl.UserDaoImpl;
import zz.practice.domain.User;


@WebServlet("/valid.do")
public class _05_ValidateServlet extends HttpServlet {
	
	private IUserDao userDao = new UserDaoImpl();

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//处理响应数据中文乱码
		resp.setContentType("text/html;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		
		//接收请求参数
		String userName = req.getParameter("userName");
		//查询数据库
		User user = userDao.loadUserByName(userName);
		String res = "";
		if(null != user){
			//user不为空，表示此用户名已被占用，不能注册
			res = "1";
		}else{
			//可以注册
			res = "2";
		}
		PrintWriter pw = resp.getWriter();
		pw.write(res);
		pw.flush();
		pw.close();
	}
	
}

小小志秩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax异步刷新注册验证

前端代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #userName{border:1px solid l
复制链接

扫一扫

专栏目录