首先需要query.js的文件
query.js的文件在此:
链接:https://pan.baidu.com/s/1IPHJ-HL5hrS2J_n57rBJ-A
提取码:8etu
放在自己创建的本项目WebContent目录下
首先在jsp页面:
<body>
<form >
昵称:<input type="text" name="nicheng" id="nicheng" onblur="check()">
<div id="result1"></div><!--这里用于显示从RegisterServlet传过来的提示信息-->
</form>
</body>
query和ajax:
<script type="text/javascript" src="jquery.js"></script><!--引入query.js文件-->
<script type="text/javascript">
//检查昵称
function check(){
$.ajax({
type:"POST",
url:"RegisterServlet",//要达到的地址,这里填的是相对地址
data:{
nicheng:$('#nicheng').val(),//这里进行数据的获取,#nicheng指的是id=nicheng
},
dataType:"text",//数据类型
success : function(data,textStatus)
{
$("#result1").text(data);
$("#result1").css("color","red");
}
});
</script>
RegisterServlet:
(我所使用的servlet是4.0版本,servlet3.0以上版本不需要配置xml)
package Controller;
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 Bean.Student;
import Dao.StudentDao;
/**
* Servlet implementation class RegisterServlet
*/
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RegisterServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理中文乱码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String nicheng=request.getParameter("nicheng");//Ajax传来的nicheng的值
PrintWriter pw=response.getWriter();
System.out.println(nicheng);
//判断昵称是否为空
if(nicheng.equals("")||nicheng==null) {
pw.write("昵称不能为空");
}else {
pw.write("");
}
//验证昵称是否重复
StudentDao sd=new StudentDao();
//调用函数去查找数据库中是否有存在相同的昵称
if(sd.ResearchNick(nicheng)) {
pw.write("昵称已经存在");
}else {
pw.write("");
}
}
}
效果如图: