ajax+Jquery实现手机号码是否被注册Demo
程序员文章站
2022-03-27 08:57:40
...
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中的判断语句是常量，还需改进与数据库关联
下一篇： 用vue做的跟随鼠标移动的div