通过ajax刷新局部内容。实现效果如下:当移开用户名的输入框,查询数据是否存在该用户名
1、使用ajax检验用户名是否可用
前端:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxFunction(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function checkUserName(){
//获取输入框的值
var name=document.getElementById("name").value;
//1、创建ajax对象
var xmlhttp=ajaxFunction();
//2、通过ajax发送请求(获取输入框的name值传给服务器)
xmlhttp.open("POST","checkUserNameServlet",true);
//3、获取服务器返回的结果
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var text=xmlhttp.responseText;
//4、根据结果进行判断,把判断结果拼接到span标签里
if(text==1){//用户名存在,不可用
document.getElementById("nameSpan").innerHTML="<font color='red'>用户名已存在</font>";
}else{//用户名不存在,可用
document.getElementById("nameSpan").innerHTML="<font color='green'>用户名可用</font>";
}
}
}
/*将参数发送给服务器*/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name="+name)
}
</script>
</head>
<body>
<table border="1" width="500px">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="name" id="name" οnblur="checkUserName()">
<span id="nameSpan"></span>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name=""></td>
</tr>
</table>
</body>
</html>
后端:
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;
import cn.goktech.Dao.UserDao;
import cn.goktech.Dao.impl.UserDaoImpl;
@WebServlet("/checkUserNameServlet")
public class checkUserNameServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
//获取ajax发送过来的参数
String name = request.getParameter("name");
UserDao userDao=new UserDaoImpl();
boolean b=userDao.findUserByName(name);
if (b) {//表用户名存在,不可用
response.getWriter().println(1);
} else {//表用户名可用
response.getWriter().println(2);
}
System.out.println(b);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2、使用JQuery&Ajax校验用户名是否可用
前端:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function checkUserName(){
//1.获取输入框的值
var name=$("#name").val();
//2.发送请求
$.post("checkUserNameServlet",{name:name},function(data,status){
if(data==1){
//用户存在
$("#nameSpan").html("<font color='red'>用户名已被注册</font>");
}else{
//用户不存在
$("#nameSpan").html("<font color='green'>用户名可用</font>");
}
})
}
</script>
</head>
<body>
<table border="1" width="500px">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="name" id="name" onblur="checkUserName()">
<span id="nameSpan"></span>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name=""></td>
</tr>
</table>
</body>
</html>
后端与之前一样