ajax+Jquery实现手机号码是否被注册Demo

最新推荐文章于 2021-04-07 12:37:31 发布

故事仍在继续

最新推荐文章于 2021-04-07 12:37:31 发布

阅读量166

点赞数

文章标签： ajax jquery

本文链接：https://blog.csdn.net/markya/article/details/105645299

版权

1.jsp文件 register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/* 使用jquery发送ajax请求 */
// /*
$(function() {//当html加载完成调用的函数
	$("#phone").blur(function() {//当id为phone的标签失去焦点以后调用
		var phone = $("#phone").val();
		$.get('checkPhone','phone='+phone,function(msg){
			alert(msg);
		});	
		
	});
});
//*/
//原生AJAX
/*
 function getData() {
		//1.创建AJAX对象
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		var phone  = document.getElementById("phone").value;
		
		//2.复写onreadystatechange函数
		xmlhttp.onreadystatechange = function() {
			//AJAX状态码4表示数据成功接收
			if(xmlhttp.readyState==4){
				//响应状态码200表示代码资源正确
				if(xmlhttp.status==200){
					var msg = xmlhttp.responseText;
					var span = document.getElementById("message");
					if(msg=='yes'){
						span.innerHTML="手机号可以注册";
						span.setAttribute("style","color:green");
					}else{
						span.innerHTML="手机号已被注册";
						span.setAttribute("style","color:red");
					}
				}
			}
		}
		//3.发送请求
		//1.请求方式 2.url 3.是否异步
		xmlhttp.open('get','checkPhone?phone='+phone,true);
		xmlhttp.send(null);
		
	}
	
	*/
</script>
</head>
<body>
		<fieldset style="width: 500px">
		<legend>注册页面</legend>
		<form action="checkPhone" method="post">
			<p>
			<!-- onblur()为失去焦点的函数 -->
				手机号：
				<input id="phone" type="text" name="phone" onblur="getData()">
				<span id="message"></span>
			</p>
			<p>
				密码：<input type="password" name="password">
			</p>
			<input type="button" value="注册" >
		</form>
	</fieldset>

</body>
</html>

2.CheckPhoneServlet

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/checkPhone")
public class CheckPhoneServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, 
			HttpServletResponse resp) throws ServletException, IOException {
		String phone = req.getParameter("phone");
		if(phone.equals("18385056630")) {
			resp.getWriter().write("no");
		}else {
			resp.getWriter().write("yes");
		}
	}
}

注明：if中的判断语句是常量，还需改进与数据库关联

故事仍在继续

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax+Jquery实现手机号码是否被注册Demo

1.jsp文件 register.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8">&l...
复制链接

扫一扫